<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>mxConnectionHandler</title><link rel="stylesheet" type="text/css" href="../../styles/main.css"><script language=JavaScript src="../../javascript/main.js"></script><script language=JavaScript src="../../javascript/prettify.js"></script><script language=JavaScript src="../../javascript/searchdata.js"></script></head><body class="ContentPage" onLoad="NDOnLoad();prettyPrint();"><script language=JavaScript><!--
if (browserType) {document.write("<div class=" + browserType + ">");if (browserVer) {document.write("<div class=" + browserVer + ">"); }}// --></script>

<!--  Generated by Natural Docs, version 1.51 -->
<!--  http://www.naturaldocs.org  -->

<!-- saved from url=(0026)http://www.naturaldocs.org -->




<div id=Content><div class="CClass"><div class=CTopic id=MainTopic><h1 class=CTitle><a name="mxConnectionHandler"></a>mxConnectionHandler</h1><div class=CBody><p>Graph event handler that creates new connections.&nbsp; Uses &lt;mxTerminalMarker&gt; for finding and highlighting the source and target vertices and <a href="#mxConnectionHandler.factoryMethod" class=LVariable id=link103 onMouseOver="ShowTip(event, 'tt6', 'link103')" onMouseOut="HideTip('tt6')">factoryMethod</a> to create the edge instance.&nbsp; This handler is built-into &lt;mxGraph.connectionHandler&gt; and enabled using <a href="../view/mxGraph-js.html#mxGraph.setConnectable" class=LFunction id=link104 onMouseOver="ShowTip(event, 'tt84', 'link104')" onMouseOut="HideTip('tt84')">mxGraph.setConnectable</a>.</p><h4 class=CHeading>Example</h4><blockquote><pre class="prettyprint">new mxConnectionHandler(graph, function(source, target, style)
{
  edge = new mxCell('', new mxGeometry());
  edge.setEdge(true);
  edge.setStyle(style);
  edge.geometry.relative = true;
  return edge;
});</pre></blockquote><p>Here is an alternative solution that just sets a specific user object for new edges by overriding <a href="#mxConnectionHandler.insertEdge" class=LFunction id=link105 onMouseOver="ShowTip(event, 'tt80', 'link105')" onMouseOut="HideTip('tt80')">insertEdge</a>.</p><blockquote><pre class="prettyprint">mxConnectionHandlerInsertEdge = mxConnectionHandler.prototype.insertEdge;
mxConnectionHandler.prototype.insertEdge = function(parent, id, value, source, target, style)
{
  value = 'Test';

  return mxConnectionHandlerInsertEdge.apply(this, arguments);
};</pre></blockquote><h4 class=CHeading>Using images to trigger connections</h4><p>This handler uses mxTerminalMarker to find the source and target cell for the new connection and creates a new edge using <a href="#mxConnectionHandler.connect" class=LFunction id=link106 onMouseOver="ShowTip(event, 'tt1', 'link106')" onMouseOut="HideTip('tt1')">connect</a>.&nbsp; The new edge is created using <a href="#mxConnectionHandler.createEdge" class=LFunction id=link107 onMouseOver="ShowTip(event, 'tt82', 'link107')" onMouseOut="HideTip('tt82')">createEdge</a> which in turn uses <a href="#mxConnectionHandler.factoryMethod" class=LVariable id=link108 onMouseOver="ShowTip(event, 'tt6', 'link108')" onMouseOut="HideTip('tt6')">factoryMethod</a> or creates a new default edge.</p><p>The handler uses a &ldquo;highlight-paradigm&rdquo; for indicating if a cell is being used as a source or target terminal, as seen in other diagramming products.&nbsp; In order to allow both, moving and connecting cells at the same time, <a href="../util/mxConstants-js.html#mxConstants.DEFAULT_HOTSPOT" class=LVariable id=link109 onMouseOver="ShowTip(event, 'tt85', 'link109')" onMouseOut="HideTip('tt85')">mxConstants.DEFAULT_HOTSPOT</a> is used in the handler to determine the hotspot of a cell, that is, the region of the cell which is used to trigger a new connection.&nbsp; The constant is a value between 0 and 1 that specifies the amount of the width and height around the center to be used for the hotspot of a cell and its default value is 0.5.&nbsp; In addition, <a href="../util/mxConstants-js.html#mxConstants.MIN_HOTSPOT_SIZE" class=LVariable id=link110 onMouseOver="ShowTip(event, 'tt86', 'link110')" onMouseOut="HideTip('tt86')">mxConstants.MIN_HOTSPOT_SIZE</a> defines the minimum number of pixels for the width and height of the hotspot.</p><p>This solution, while standards compliant, may be somewhat confusing because there is no visual indicator for the hotspot and the highlight is seen to switch on and off while the mouse is being moved in and out.&nbsp; Furthermore, this paradigm does not allow to create different connections depending on the highlighted hotspot as there is only one hotspot per cell and it normally does not allow cells to be moved and connected at the same time as there is no clear indication of the connectable area of the cell.</p><p>To come across these issues, the handle has an additional <a href="#mxConnectionHandler.createIcons" class=LFunction id=link111 onMouseOver="ShowTip(event, 'tt53', 'link111')" onMouseOut="HideTip('tt53')">createIcons</a> hook with a default implementation that allows to create one icon to be used to trigger new connections.&nbsp; If this icon is specified, then new connections can only be created if the image is clicked while the cell is being highlighted.&nbsp; The <a href="#mxConnectionHandler.createIcons" class=LFunction id=link112 onMouseOver="ShowTip(event, 'tt53', 'link112')" onMouseOut="HideTip('tt53')">createIcons</a> hook may be overridden to create more than one <a href="../shape/mxImageShape-js.html#mxImageShape" class=LClass id=link113 onMouseOver="ShowTip(event, 'tt54', 'link113')" onMouseOut="HideTip('tt54')">mxImageShape</a> for creating new connections, but the default implementation supports one image and is used as follows:</p><p>In order to display the &ldquo;connect image&rdquo; whenever the mouse is over the cell, an DEFAULT_HOTSPOT of 1 should be used:</p><blockquote><pre class="prettyprint">mxConstants.DEFAULT_HOTSPOT = 1;</pre></blockquote><p>In order to avoid confusion with the highlighting, the highlight color should not be used with a connect image:</p><blockquote><pre class="prettyprint">mxConstants.HIGHLIGHT_COLOR = null;</pre></blockquote><p>To install the image, the connectImage field of the mxConnectionHandler must be assigned a new <a href="../util/mxImage-js.html#mxImage" class=LClass id=link114 onMouseOver="ShowTip(event, 'tt10', 'link114')" onMouseOut="HideTip('tt10')">mxImage</a> instance:</p><blockquote><pre class="prettyprint">mxConnectionHandler.prototype.connectImage = new mxImage('images/green-dot.gif', 14, 14);</pre></blockquote><p>This will use the green-dot.gif with a width and height of 14 pixels as the image to trigger new connections.&nbsp; In createIcons the icon field of the handler will be set in order to remember the icon that has been clicked for creating the new connection.&nbsp; This field will be available under selectedIcon in the connect method, which may be overridden to take the icon that triggered the new connection into account.&nbsp; This is useful if more than one icon may be used to create a connection.</p><!--START_ND_SUMMARY--><div class=Summary><div class=STitle>Summary</div><div class=SBorder><table border=0 cellspacing=0 cellpadding=0 class=STable><tr class="SMain"><td class=SEntry><a href="#mxConnectionHandler" >mxConnectionHandler</a></td><td class=SDescription>Graph event handler that creates new connections. </td></tr><tr class="SGroup SIndent1"><td class=SEntry><a href="#mxConnectionHandler.Events" >Events</a></td><td class=SDescription></td></tr><tr class="SEvent SIndent2 SMarked"><td class=SEntry><a href="#mxConnectionHandler.mxEvent.START" >mxEvent.<wbr>START</a></td><td class=SDescription>Fires when a new connection is being created by the user. </td></tr><tr class="SEvent SIndent2"><td class=SEntry><a href="#mxConnectionHandler.mxEvent.CONNECT" >mxEvent.<wbr>CONNECT</a></td><td class=SDescription>Fires between begin- and endUpdate in <a href="#mxConnectionHandler.connect" class=LFunction id=link1 onMouseOver="ShowTip(event, 'tt1', 'link1')" onMouseOut="HideTip('tt1')">connect</a>. </td></tr><tr class="SEvent SIndent2 SMarked"><td class=SEntry><a href="#mxConnectionHandler.mxEvent.RESET" >mxEvent.<wbr>RESET</a></td><td class=SDescription>Fires when the <a href="#mxConnectionHandler.reset" class=LFunction id=link2 onMouseOver="ShowTip(event, 'tt2', 'link2')" onMouseOut="HideTip('tt2')">reset</a> method is invoked.</td></tr><tr class="SFunction SIndent2"><td class=SEntry><a href="#mxConnectionHandler.mxConnectionHandler" id=link3 onMouseOver="ShowTip(event, 'tt3', 'link3')" onMouseOut="HideTip('tt3')">mxConnectionHandler</a></td><td class=SDescription>Constructs an event handler that connects vertices using the specified factory method to create the new edges. </td></tr><tr class="SVariable SIndent2 SMarked"><td class=SEntry><a href="#mxConnectionHandler.graph" id=link4 onMouseOver="ShowTip(event, 'tt4', 'link4')" onMouseOut="HideTip('tt4')">graph</a></td><td class=SDescription>Reference to the enclosing <a href="../view/mxGraph-js.html#mxGraph" class=LClass id=link5 onMouseOver="ShowTip(event, 'tt5', 'link5')" onMouseOut="HideTip('tt5')">mxGraph</a>.</td></tr><tr class="SVariable SIndent2"><td class=SEntry><a href="#mxConnectionHandler.factoryMethod" id=link6 onMouseOver="ShowTip(event, 'tt6', 'link6')" onMouseOut="HideTip('tt6')">factoryMethod</a></td><td class=SDescription>Function that is used for creating new edges. </td></tr><tr class="SVariable SIndent2 SMarked"><td class=SEntry><a href="#mxConnectionHandler.moveIconFront" id=link7 onMouseOver="ShowTip(event, 'tt7', 'link7')" onMouseOut="HideTip('tt7')">moveIconFront</a></td><td class=SDescription>Specifies if icons should be displayed inside the graph container instead of the overlay pane. </td></tr><tr class="SVariable SIndent2"><td class=SEntry><a href="#mxConnectionHandler.moveIconBack" id=link8 onMouseOver="ShowTip(event, 'tt8', 'link8')" onMouseOut="HideTip('tt8')">moveIconBack</a></td><td class=SDescription>Specifies if icons should be moved to the back of the overlay pane. </td></tr><tr class="SVariable SIndent2 SMarked"><td class=SEntry><a href="#mxConnectionHandler.connectImage" id=link9 onMouseOver="ShowTip(event, 'tt9', 'link9')" onMouseOut="HideTip('tt9')">connectImage</a></td><td class=SDescription><a href="../util/mxImage-js.html#mxImage" class=LClass id=link10 onMouseOver="ShowTip(event, 'tt10', 'link10')" onMouseOut="HideTip('tt10')">mxImage</a> that is used to trigger the creation of a new connection. </td></tr><tr class="SVariable SIndent2"><td class=SEntry><a href="#mxConnectionHandler.targetConnectImage" id=link11 onMouseOver="ShowTip(event, 'tt11', 'link11')" onMouseOut="HideTip('tt11')">targetConnectImage</a></td><td class=SDescription>Specifies if the connect icon should be centered on the target state while connections are being previewed. </td></tr><tr class="SVariable SIndent2 SMarked"><td class=SEntry><a href="#mxConnectionHandler.enabled" id=link12 onMouseOver="ShowTip(event, 'tt12', 'link12')" onMouseOut="HideTip('tt12')">enabled</a></td><td class=SDescription>Specifies if events are handled. </td></tr><tr class="SVariable SIndent2"><td class=SEntry><a href="#mxConnectionHandler.select" id=link13 onMouseOver="ShowTip(event, 'tt13', 'link13')" onMouseOut="HideTip('tt13')">select</a></td><td class=SDescription>Specifies if new edges should be selected. </td></tr><tr class="SVariable SIndent2 SMarked"><td class=SEntry><a href="#mxConnectionHandler.createTarget" id=link14 onMouseOver="ShowTip(event, 'tt14', 'link14')" onMouseOut="HideTip('tt14')">createTarget</a></td><td class=SDescription>Specifies if <a href="#mxConnectionHandler.createTargetVertex" class=LFunction id=link15 onMouseOver="ShowTip(event, 'tt15', 'link15')" onMouseOut="HideTip('tt15')">createTargetVertex</a> should be called if no target was under the mouse for the new connection. </td></tr><tr class="SVariable SIndent2"><td class=SEntry><a href="#mxConnectionHandler.marker" id=link16 onMouseOver="ShowTip(event, 'tt16', 'link16')" onMouseOut="HideTip('tt16')">marker</a></td><td class=SDescription>Holds the &lt;mxTerminalMarker&gt; used for finding source and target cells.</td></tr><tr class="SVariable SIndent2 SMarked"><td class=SEntry><a href="#mxConnectionHandler.constraintHandler" id=link17 onMouseOver="ShowTip(event, 'tt17', 'link17')" onMouseOut="HideTip('tt17')">constraintHandler</a></td><td class=SDescription>Holds the <a href="mxConstraintHandler-js.html#mxConstraintHandler" class=LClass id=link18 onMouseOver="ShowTip(event, 'tt18', 'link18')" onMouseOut="HideTip('tt18')">mxConstraintHandler</a> used for drawing and highlighting constraints.</td></tr><tr class="SVariable SIndent2"><td class=SEntry><a href="#mxConnectionHandler.error" id=link19 onMouseOver="ShowTip(event, 'tt19', 'link19')" onMouseOut="HideTip('tt19')">error</a></td><td class=SDescription>Holds the current validation error while connections are being created.</td></tr><tr class="SVariable SIndent2 SMarked"><td class=SEntry><a href="#mxConnectionHandler.waypointsEnabled" id=link20 onMouseOver="ShowTip(event, 'tt20', 'link20')" onMouseOut="HideTip('tt20')">waypointsEnabled</a></td><td class=SDescription>Specifies if single clicks should add waypoints on the new edge. </td></tr><tr class="SVariable SIndent2"><td class=SEntry><a href="#mxConnectionHandler.ignoreMouseDown" id=link21 onMouseOver="ShowTip(event, 'tt21', 'link21')" onMouseOut="HideTip('tt21')">ignoreMouseDown</a></td><td class=SDescription>Specifies if the connection handler should ignore the state of the mouse button when highlighting the source. </td></tr><tr class="SVariable SIndent2 SMarked"><td class=SEntry><a href="#mxConnectionHandler.first" id=link22 onMouseOver="ShowTip(event, 'tt22', 'link22')" onMouseOut="HideTip('tt22')">first</a></td><td class=SDescription>Holds the <a href="../util/mxPoint-js.html#mxPoint" class=LClass id=link23 onMouseOver="ShowTip(event, 'tt23', 'link23')" onMouseOut="HideTip('tt23')">mxPoint</a> where the mouseDown took place while the handler is active.</td></tr><tr class="SVariable SIndent2"><td class=SEntry><a href="#mxConnectionHandler.connectIconOffset" id=link24 onMouseOver="ShowTip(event, 'tt24', 'link24')" onMouseOut="HideTip('tt24')">connectIconOffset</a></td><td class=SDescription>Holds the offset for connect icons during connection preview. </td></tr><tr class="SVariable SIndent2 SMarked"><td class=SEntry><a href="#mxConnectionHandler.edgeState" id=link25 onMouseOver="ShowTip(event, 'tt25', 'link25')" onMouseOut="HideTip('tt25')">edgeState</a></td><td class=SDescription>Optional <a href="../view/mxCellState-js.html#mxCellState" class=LClass id=link26 onMouseOver="ShowTip(event, 'tt26', 'link26')" onMouseOut="HideTip('tt26')">mxCellState</a> that represents the preview edge while the handler is active. </td></tr><tr class="SVariable SIndent2"><td class=SEntry><a href="#mxConnectionHandler.changeHandler" id=link27 onMouseOver="ShowTip(event, 'tt27', 'link27')" onMouseOut="HideTip('tt27')">changeHandler</a></td><td class=SDescription>Holds the change event listener for later removal.</td></tr><tr class="SVariable SIndent2 SMarked"><td class=SEntry><a href="#mxConnectionHandler.drillHandler" id=link28 onMouseOver="ShowTip(event, 'tt28', 'link28')" onMouseOut="HideTip('tt28')">drillHandler</a></td><td class=SDescription>Holds the drill event listener for later removal.</td></tr><tr class="SVariable SIndent2"><td class=SEntry><a href="#mxConnectionHandler.mouseDownCounter" id=link29 onMouseOver="ShowTip(event, 'tt29', 'link29')" onMouseOut="HideTip('tt29')">mouseDownCounter</a></td><td class=SDescription>Counts the number of mouseDown events since the start. </td></tr><tr class="SVariable SIndent2 SMarked"><td class=SEntry><a href="#mxConnectionHandler.movePreviewAway" id=link30 onMouseOver="ShowTip(event, 'tt30', 'link30')" onMouseOut="HideTip('tt30')">movePreviewAway</a></td><td class=SDescription>Switch to enable moving the preview away from the mousepointer. </td></tr><tr class="SVariable SIndent2"><td class=SEntry><a href="#mxConnectionHandler.outlineConnect" id=link31 onMouseOver="ShowTip(event, 'tt31', 'link31')" onMouseOut="HideTip('tt31')">outlineConnect</a></td><td class=SDescription>Specifies if connections to the outline of a highlighted target should be enabled. </td></tr><tr class="SVariable SIndent2 SMarked"><td class=SEntry><a href="#mxConnectionHandler.livePreview" id=link32 onMouseOver="ShowTip(event, 'tt32', 'link32')" onMouseOut="HideTip('tt32')">livePreview</a></td><td class=SDescription>Specifies if the actual shape of the edge state should be used for the preview. </td></tr><tr class="SVariable SIndent2"><td class=SEntry><a href="#mxConnectionHandler.cursor" id=link33 onMouseOver="ShowTip(event, 'tt33', 'link33')" onMouseOut="HideTip('tt33')">cursor</a></td><td class=SDescription>Specifies the cursor to be used while the handler is active. </td></tr><tr class="SVariable SIndent2 SMarked"><td class=SEntry><a href="#mxConnectionHandler.insertBeforeSource" id=link34 onMouseOver="ShowTip(event, 'tt34', 'link34')" onMouseOut="HideTip('tt34')">insertBeforeSource</a></td><td class=SDescription>Specifies if new edges should be inserted before the source vertex in the cell hierarchy. </td></tr><tr class="SFunction SIndent2"><td class=SEntry><a href="#mxConnectionHandler.isEnabled" id=link35 onMouseOver="ShowTip(event, 'tt35', 'link35')" onMouseOut="HideTip('tt35')">isEnabled</a></td><td class=SDescription>Returns true if events are handled. </td></tr><tr class="SFunction SIndent2 SMarked"><td class=SEntry><a href="#mxConnectionHandler.setEnabled" id=link36 onMouseOver="ShowTip(event, 'tt36', 'link36')" onMouseOut="HideTip('tt36')">setEnabled</a></td><td class=SDescription>Enables or disables event handling. </td></tr><tr class="SFunction SIndent2"><td class=SEntry><a href="#mxConnectionHandler.isInsertBefore" id=link37 onMouseOver="ShowTip(event, 'tt37', 'link37')" onMouseOut="HideTip('tt37')">isInsertBefore</a></td><td class=SDescription>Returns <a href="#mxConnectionHandler.insertBeforeSource" class=LVariable id=link38 onMouseOver="ShowTip(event, 'tt34', 'link38')" onMouseOut="HideTip('tt34')">insertBeforeSource</a> for non-loops and false for loops.</td></tr><tr class="SFunction SIndent2 SMarked"><td class=SEntry><a href="#mxConnectionHandler.isCreateTarget" id=link39 onMouseOver="ShowTip(event, 'tt38', 'link39')" onMouseOut="HideTip('tt38')">isCreateTarget</a></td><td class=SDescription>Returns <a href="#mxConnectionHandler.createTarget" class=LVariable id=link40 onMouseOver="ShowTip(event, 'tt14', 'link40')" onMouseOut="HideTip('tt14')">createTarget</a>.</td></tr><tr class="SFunction SIndent2"><td class=SEntry><a href="#mxConnectionHandler.setCreateTarget" id=link41 onMouseOver="ShowTip(event, 'tt39', 'link41')" onMouseOut="HideTip('tt39')">setCreateTarget</a></td><td class=SDescription>Sets <a href="#mxConnectionHandler.createTarget" class=LVariable id=link42 onMouseOver="ShowTip(event, 'tt14', 'link42')" onMouseOut="HideTip('tt14')">createTarget</a>.</td></tr><tr class="SFunction SIndent2 SMarked"><td class=SEntry><a href="#mxConnectionHandler.createShape" id=link43 onMouseOver="ShowTip(event, 'tt40', 'link43')" onMouseOut="HideTip('tt40')">createShape</a></td><td class=SDescription>Creates the preview shape for new connections.</td></tr><tr class="SFunction SIndent2"><td class=SEntry><a href="#mxConnectionHandler.init" id=link44 onMouseOver="ShowTip(event, 'tt41', 'link44')" onMouseOut="HideTip('tt41')">init</a></td><td class=SDescription>Initializes the shapes required for this connection handler. </td></tr><tr class="SFunction SIndent2 SMarked"><td class=SEntry><a href="#mxConnectionHandler.isConnectableCell" id=link45 onMouseOver="ShowTip(event, 'tt42', 'link45')" onMouseOut="HideTip('tt42')">isConnectableCell</a></td><td class=SDescription>Returns true if the given cell is connectable. </td></tr><tr class="SFunction SIndent2"><td class=SEntry><a href="#mxConnectionHandler.createMarker" id=link46 onMouseOver="ShowTip(event, 'tt43', 'link46')" onMouseOut="HideTip('tt43')">createMarker</a></td><td class=SDescription>Creates and returns the <a href="mxCellMarker-js.html#mxCellMarker" class=LClass id=link47 onMouseOver="ShowTip(event, 'tt44', 'link47')" onMouseOut="HideTip('tt44')">mxCellMarker</a> used in <a href="#mxConnectionHandler.marker" class=LVariable id=link48 onMouseOver="ShowTip(event, 'tt16', 'link48')" onMouseOut="HideTip('tt16')">marker</a>.</td></tr><tr class="SFunction SIndent2 SMarked"><td class=SEntry><a href="#mxConnectionHandler.start" id=link49 onMouseOver="ShowTip(event, 'tt45', 'link49')" onMouseOut="HideTip('tt45')">start</a></td><td class=SDescription>Starts a new connection for the given state and coordinates.</td></tr><tr class="SFunction SIndent2"><td class=SEntry><a href="#mxConnectionHandler.isConnecting" id=link50 onMouseOver="ShowTip(event, 'tt46', 'link50')" onMouseOut="HideTip('tt46')">isConnecting</a></td><td class=SDescription>Returns true if the source terminal has been clicked and a new connection is currently being previewed.</td></tr><tr class="SFunction SIndent2 SMarked"><td class=SEntry><a href="#mxConnectionHandler.isValidSource" id=link51 onMouseOver="ShowTip(event, 'tt47', 'link51')" onMouseOut="HideTip('tt47')">isValidSource</a></td><td class=SDescription>Returns <a href="../view/mxGraph-js.html#mxGraph.isValidSource" class=LFunction id=link52 onMouseOver="ShowTip(event, 'tt48', 'link52')" onMouseOut="HideTip('tt48')">mxGraph.isValidSource</a> for the given source terminal.</td></tr><tr class="SFunction SIndent2"><td class=SEntry><a href="#mxConnectionHandler.isValidTarget" id=link53 onMouseOver="ShowTip(event, 'tt49', 'link53')" onMouseOut="HideTip('tt49')">isValidTarget</a></td><td class=SDescription>Returns true. </td></tr><tr class="SFunction SIndent2 SMarked"><td class=SEntry><a href="#mxConnectionHandler.validateConnection" id=link54 onMouseOver="ShowTip(event, 'tt50', 'link54')" onMouseOut="HideTip('tt50')">validateConnection</a></td><td class=SDescription>Returns the error message or an empty string if the connection for the given source target pair is not valid. </td></tr><tr class="SFunction SIndent2"><td class=SEntry><a href="#mxConnectionHandler.getConnectImage" id=link55 onMouseOver="ShowTip(event, 'tt51', 'link55')" onMouseOut="HideTip('tt51')">getConnectImage</a></td><td class=SDescription>Hook to return the <a href="../util/mxImage-js.html#mxImage" class=LClass id=link56 onMouseOver="ShowTip(event, 'tt10', 'link56')" onMouseOut="HideTip('tt10')">mxImage</a> used for the connection icon of the given <a href="../view/mxCellState-js.html#mxCellState" class=LClass id=link57 onMouseOver="ShowTip(event, 'tt26', 'link57')" onMouseOut="HideTip('tt26')">mxCellState</a>. </td></tr><tr class="SFunction SIndent2 SMarked"><td class=SEntry><a href="#mxConnectionHandler.isMoveIconToFrontForState" id=link58 onMouseOver="ShowTip(event, 'tt52', 'link58')" onMouseOut="HideTip('tt52')">isMoveIconToFrontForState</a></td><td class=SDescription>Returns true if the state has a HTML label in the graph&rsquo;s container, otherwise it returns <a href="#mxConnectionHandler.moveIconFront" class=LVariable id=link59 onMouseOver="ShowTip(event, 'tt7', 'link59')" onMouseOut="HideTip('tt7')">moveIconFront</a>.</td></tr><tr class="SFunction SIndent2"><td class=SEntry><a href="#mxConnectionHandler.createIcons" id=link60 onMouseOver="ShowTip(event, 'tt53', 'link60')" onMouseOut="HideTip('tt53')">createIcons</a></td><td class=SDescription>Creates the array <a href="../shape/mxImageShape-js.html#mxImageShape" class=LClass id=link61 onMouseOver="ShowTip(event, 'tt54', 'link61')" onMouseOut="HideTip('tt54')">mxImageShapes</a> that represent the connect icons for the given <a href="../view/mxCellState-js.html#mxCellState" class=LClass id=link62 onMouseOver="ShowTip(event, 'tt26', 'link62')" onMouseOut="HideTip('tt26')">mxCellState</a>.</td></tr><tr class="SFunction SIndent2 SMarked"><td class=SEntry><a href="#mxConnectionHandler.redrawIcons" id=link63 onMouseOver="ShowTip(event, 'tt55', 'link63')" onMouseOut="HideTip('tt55')">redrawIcons</a></td><td class=SDescription>Redraws the given array of <a href="../shape/mxImageShape-js.html#mxImageShape" class=LClass id=link64 onMouseOver="ShowTip(event, 'tt54', 'link64')" onMouseOut="HideTip('tt54')">mxImageShapes</a>.</td></tr><tr class="SFunction SIndent2"><td class=SEntry><a href="#mxConnectionHandler.getIconPosition" id=link65 onMouseOver="ShowTip(event, 'tt56', 'link65')" onMouseOut="HideTip('tt56')">getIconPosition</a></td><td class=SDescription>Returns the center position of the given icon.</td></tr><tr class="SFunction SIndent2 SMarked"><td class=SEntry><a href="#mxConnectionHandler.destroyIcons" id=link66 onMouseOver="ShowTip(event, 'tt57', 'link66')" onMouseOut="HideTip('tt57')">destroyIcons</a></td><td class=SDescription>Destroys the connect icons and resets the respective state.</td></tr><tr class="SFunction SIndent2"><td class=SEntry><a href="#mxConnectionHandler.isStartEvent" id=link67 onMouseOver="ShowTip(event, 'tt58', 'link67')" onMouseOut="HideTip('tt58')">isStartEvent</a></td><td class=SDescription>Returns true if the given mouse down event should start this handler. </td></tr><tr class="SFunction SIndent2 SMarked"><td class=SEntry><a href="#mxConnectionHandler.mouseDown" id=link68 onMouseOver="ShowTip(event, 'tt59', 'link68')" onMouseOut="HideTip('tt59')">mouseDown</a></td><td class=SDescription>Handles the event by initiating a new connection.</td></tr><tr class="SFunction SIndent2"><td class=SEntry><a href="#mxConnectionHandler.isImmediateConnectSource" id=link69 onMouseOver="ShowTip(event, 'tt60', 'link69')" onMouseOut="HideTip('tt60')">isImmediateConnectSource</a></td><td class=SDescription>Returns true if a tap on the given source state should immediately start connecting. </td></tr><tr class="SFunction SIndent2 SMarked"><td class=SEntry><a href="#mxConnectionHandler.createEdgeState" id=link70 onMouseOver="ShowTip(event, 'tt61', 'link70')" onMouseOut="HideTip('tt61')">createEdgeState</a></td><td class=SDescription>Hook to return an <a href="../view/mxCellState-js.html#mxCellState" class=LClass id=link71 onMouseOver="ShowTip(event, 'tt26', 'link71')" onMouseOut="HideTip('tt26')">mxCellState</a> which may be used during the preview. </td></tr><tr class="SFunction SIndent2"><td class=SEntry><a href="#mxConnectionHandler.isOutlineConnectEvent" id=link72 onMouseOver="ShowTip(event, 'tt62', 'link72')" onMouseOut="HideTip('tt62')">isOutlineConnectEvent</a></td><td class=SDescription>Returns true if <a href="#mxConnectionHandler.outlineConnect" class=LVariable id=link73 onMouseOver="ShowTip(event, 'tt31', 'link73')" onMouseOut="HideTip('tt31')">outlineConnect</a> is true and the source of the event is the outline shape or shift is pressed.</td></tr><tr class="SFunction SIndent2 SMarked"><td class=SEntry><a href="#mxConnectionHandler.updateCurrentState" id=link74 onMouseOver="ShowTip(event, 'tt63', 'link74')" onMouseOut="HideTip('tt63')">updateCurrentState</a></td><td class=SDescription>Updates the current state for a given mouse move event by using the <a href="#mxConnectionHandler.marker" class=LVariable id=link75 onMouseOver="ShowTip(event, 'tt16', 'link75')" onMouseOut="HideTip('tt16')">marker</a>.</td></tr><tr class="SFunction SIndent2"><td class=SEntry><a href="#mxConnectionHandler.isCellEnabled" id=link76 onMouseOver="ShowTip(event, 'tt64', 'link76')" onMouseOut="HideTip('tt64')">isCellEnabled</a></td><td class=SDescription>Returns true if the given cell allows new connections to be created. </td></tr><tr class="SFunction SIndent2 SMarked"><td class=SEntry><a href="#mxConnectionHandler.convertWaypoint" id=link77 onMouseOver="ShowTip(event, 'tt65', 'link77')" onMouseOut="HideTip('tt65')">convertWaypoint</a></td><td class=SDescription>Converts the given point from screen coordinates to model coordinates.</td></tr><tr class="SFunction SIndent2"><td class=SEntry><a href="#mxConnectionHandler.snapToPreview" id=link78 onMouseOver="ShowTip(event, 'tt66', 'link78')" onMouseOut="HideTip('tt66')">snapToPreview</a></td><td class=SDescription>Called to snap the given point to the current preview. </td></tr><tr class="SFunction SIndent2 SMarked"><td class=SEntry><a href="#mxConnectionHandler.mouseMove" id=link79 onMouseOver="ShowTip(event, 'tt67', 'link79')" onMouseOut="HideTip('tt67')">mouseMove</a></td><td class=SDescription>Handles the event by updating the preview edge or by highlighting a possible source or target terminal.</td></tr><tr class="SFunction SIndent2"><td class=SEntry><a href="#mxConnectionHandler.updateEdgeState" id=link80 onMouseOver="ShowTip(event, 'tt68', 'link80')" onMouseOut="HideTip('tt68')">updateEdgeState</a></td><td class=SDescription>Updates <a href="#mxConnectionHandler.edgeState" class=LVariable id=link81 onMouseOver="ShowTip(event, 'tt25', 'link81')" onMouseOut="HideTip('tt25')">edgeState</a>.</td></tr><tr class="SFunction SIndent2 SMarked"><td class=SEntry><a href="#mxConnectionHandler.getTargetPerimeterPoint" id=link82 onMouseOver="ShowTip(event, 'tt69', 'link82')" onMouseOut="HideTip('tt69')">getTargetPerimeterPoint</a></td><td class=SDescription>Returns the perimeter point for the given target state.</td></tr><tr class="SFunction SIndent2"><td class=SEntry><a href="#mxConnectionHandler.getSourcePerimeterPoint" id=link83 onMouseOver="ShowTip(event, 'tt70', 'link83')" onMouseOut="HideTip('tt70')">getSourcePerimeterPoint</a></td><td class=SDescription>Hook to update the icon position(s) based on a mouseOver event. </td></tr><tr class="SFunction SIndent2 SMarked"><td class=SEntry><a href="#mxConnectionHandler.updateIcons" id=link84 onMouseOver="ShowTip(event, 'tt71', 'link84')" onMouseOut="HideTip('tt71')">updateIcons</a></td><td class=SDescription>Hook to update the icon position(s) based on a mouseOver event. </td></tr><tr class="SFunction SIndent2"><td class=SEntry><a href="#mxConnectionHandler.isStopEvent" id=link85 onMouseOver="ShowTip(event, 'tt72', 'link85')" onMouseOut="HideTip('tt72')">isStopEvent</a></td><td class=SDescription>Returns true if the given mouse up event should stop this handler. </td></tr><tr class="SFunction SIndent2 SMarked"><td class=SEntry><a href="#mxConnectionHandler.addWaypoint" id=link86 onMouseOver="ShowTip(event, 'tt73', 'link86')" onMouseOut="HideTip('tt73')">addWaypoint</a></td><td class=SDescription>Adds the waypoint for the given event to &lt;waypoints&gt;.</td></tr><tr class="SFunction SIndent2"><td class=SEntry><a href="#mxConnectionHandler.checkConstraints" id=link87 onMouseOver="ShowTip(event, 'tt74', 'link87')" onMouseOut="HideTip('tt74')">checkConstraints</a></td><td class=SDescription>Returns true if the connection for the given constraints is valid. </td></tr><tr class="SFunction SIndent2 SMarked"><td class=SEntry><a href="#mxConnectionHandler.mouseUp" id=link88 onMouseOver="ShowTip(event, 'tt75', 'link88')" onMouseOut="HideTip('tt75')">mouseUp</a></td><td class=SDescription>Handles the event by inserting the new connection.</td></tr><tr class="SFunction SIndent2"><td class=SEntry><a href="#mxConnectionHandler.reset" id=link89 onMouseOver="ShowTip(event, 'tt2', 'link89')" onMouseOut="HideTip('tt2')">reset</a></td><td class=SDescription>Resets the state of this handler.</td></tr><tr class="SFunction SIndent2 SMarked"><td class=SEntry><a href="#mxConnectionHandler.drawPreview" id=link90 onMouseOver="ShowTip(event, 'tt76', 'link90')" onMouseOut="HideTip('tt76')">drawPreview</a></td><td class=SDescription>Redraws the preview edge using the color and width returned by <a href="#mxConnectionHandler.getEdgeColor" class=LFunction id=link91 onMouseOver="ShowTip(event, 'tt77', 'link91')" onMouseOut="HideTip('tt77')">getEdgeColor</a> and <a href="#mxConnectionHandler.getEdgeWidth" class=LFunction id=link92 onMouseOver="ShowTip(event, 'tt78', 'link92')" onMouseOut="HideTip('tt78')">getEdgeWidth</a>.</td></tr><tr class="SFunction SIndent2"><td class=SEntry><a href="#mxConnectionHandler.getEdgeColor" >getEdgeColor</a></td><td class=SDescription>Returns the color used to draw the preview edge. </td></tr><tr class="SFunction SIndent2 SMarked"><td class=SEntry><a href="#mxConnectionHandler.getEdgeColor" id=link93 onMouseOver="ShowTip(event, 'tt77', 'link93')" onMouseOut="HideTip('tt77')">getEdgeColor</a></td><td class=SDescription>Returns the color used to draw the preview edge. </td></tr><tr class="SFunction SIndent2"><td class=SEntry><a href="#mxConnectionHandler.getEdgeWidth" id=link94 onMouseOver="ShowTip(event, 'tt78', 'link94')" onMouseOut="HideTip('tt78')">getEdgeWidth</a></td><td class=SDescription>Returns the width used to draw the preview edge. </td></tr><tr class="SFunction SIndent2 SMarked"><td class=SEntry><a href="#mxConnectionHandler.connect" id=link95 onMouseOver="ShowTip(event, 'tt1', 'link95')" onMouseOut="HideTip('tt1')">connect</a></td><td class=SDescription>Connects the given source and target using a new edge. </td></tr><tr class="SFunction SIndent2"><td class=SEntry><a href="#mxConnectionHandler.selectCells" id=link96 onMouseOver="ShowTip(event, 'tt79', 'link96')" onMouseOut="HideTip('tt79')">selectCells</a></td><td class=SDescription>Selects the given edge after adding a new connection. </td></tr><tr class="SFunction SIndent2 SMarked"><td class=SEntry><a href="#mxConnectionHandler.insertEdge" id=link97 onMouseOver="ShowTip(event, 'tt80', 'link97')" onMouseOut="HideTip('tt80')">insertEdge</a></td><td class=SDescription>Creates, inserts and returns the new edge for the given parameters. </td></tr><tr class="SFunction SIndent2"><td class=SEntry><a href="#mxConnectionHandler.createTargetVertex" id=link98 onMouseOver="ShowTip(event, 'tt15', 'link98')" onMouseOut="HideTip('tt15')">createTargetVertex</a></td><td class=SDescription>Hook method for creating new vertices on the fly if no target was under the mouse. </td></tr><tr class="SFunction SIndent2 SMarked"><td class=SEntry><a href="#mxConnectionHandler.getAlignmentTolerance" id=link99 onMouseOver="ShowTip(event, 'tt81', 'link99')" onMouseOut="HideTip('tt81')">getAlignmentTolerance</a></td><td class=SDescription>Returns the tolerance for aligning new targets to sources. </td></tr><tr class="SFunction SIndent2"><td class=SEntry><a href="#mxConnectionHandler.createEdge" id=link100 onMouseOver="ShowTip(event, 'tt82', 'link100')" onMouseOut="HideTip('tt82')">createEdge</a></td><td class=SDescription>Creates and returns a new edge using <a href="#mxConnectionHandler.factoryMethod" class=LVariable id=link101 onMouseOver="ShowTip(event, 'tt6', 'link101')" onMouseOut="HideTip('tt6')">factoryMethod</a> if one exists. </td></tr><tr class="SFunction SIndent2 SMarked"><td class=SEntry><a href="#mxConnectionHandler.destroy" id=link102 onMouseOver="ShowTip(event, 'tt83', 'link102')" onMouseOut="HideTip('tt83')">destroy</a></td><td class=SDescription>Destroys the handler and all its resources and DOM nodes. </td></tr></table></div></div><!--END_ND_SUMMARY--></div></div></div>

<div class="CGroup"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.Events"></a>Events</h3></div></div>

<div class="CEvent"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.mxEvent.START"></a>mxEvent.<wbr>START</h3><div class=CBody><p>Fires when a new connection is being created by the user.&nbsp; The &lt;code&gt;state&lt;/code&gt; property contains the state of the source cell.</p></div></div></div>

<div class="CEvent"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.mxEvent.CONNECT"></a>mxEvent.<wbr>CONNECT</h3><div class=CBody><p>Fires between begin- and endUpdate in <a href="#mxConnectionHandler.connect" class=LFunction id=link115 onMouseOver="ShowTip(event, 'tt1', 'link115')" onMouseOut="HideTip('tt1')">connect</a>.&nbsp; The &lt;code&gt;cell&lt;/code&gt; property contains the inserted edge, the &lt;code&gt;event&lt;/code&gt; and &lt;code&gt;target&lt;/code&gt; properties contain the respective arguments that were passed to <a href="#mxConnectionHandler.connect" class=LFunction id=link116 onMouseOver="ShowTip(event, 'tt1', 'link116')" onMouseOut="HideTip('tt1')">connect</a> (where target corresponds to the dropTarget argument).&nbsp; Finally, the &lt;code&gt;terminal&lt;/code&gt; property corresponds to the target argument in <a href="#mxConnectionHandler.connect" class=LFunction id=link117 onMouseOver="ShowTip(event, 'tt1', 'link117')" onMouseOut="HideTip('tt1')">connect</a> or the clone of the source terminal if <a href="#mxConnectionHandler.createTarget" class=LVariable id=link118 onMouseOver="ShowTip(event, 'tt14', 'link118')" onMouseOut="HideTip('tt14')">createTarget</a> is enabled.</p><p>Note that the target is the cell under the mouse where the mouse button was released.&nbsp; Depending on the logic in the handler, this doesn&rsquo;t necessarily have to be the target of the inserted edge.&nbsp; To print the source, target or any optional ports IDs that the edge is connected to, the following code can be used.&nbsp; To get more details about the actual connection point, <a href="../view/mxGraph-js.html#mxGraph.getConnectionConstraint" class=LFunction id=link119 onMouseOver="ShowTip(event, 'tt87', 'link119')" onMouseOut="HideTip('tt87')">mxGraph.getConnectionConstraint</a> can be used.&nbsp; To resolve the port IDs, use <a href="../model/mxGraphModel-js.html#mxGraphModel.getCell" class=LFunction id=link120 onMouseOver="ShowTip(event, 'tt88', 'link120')" onMouseOut="HideTip('tt88')">mxGraphModel.getCell</a>.</p><blockquote><pre class="prettyprint">graph.connectionHandler.addListener(mxEvent.CONNECT, function(sender, evt)
{
  var edge = evt.getProperty('cell');
  var source = graph.getModel().getTerminal(edge, true);
  var target = graph.getModel().getTerminal(edge, false);

  var style = graph.getCellStyle(edge);
  var sourcePortId = style[mxConstants.STYLE_SOURCE_PORT];
  var targetPortId = style[mxConstants.STYLE_TARGET_PORT];

  mxLog.show();
  mxLog.debug('connect', edge, source.id, target.id, sourcePortId, targetPortId);
});</pre></blockquote></div></div></div>

<div class="CEvent"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.mxEvent.RESET"></a>mxEvent.<wbr>RESET</h3><div class=CBody><p>Fires when the <a href="#mxConnectionHandler.reset" class=LFunction id=link121 onMouseOver="ShowTip(event, 'tt2', 'link121')" onMouseOut="HideTip('tt2')">reset</a> method is invoked.</p></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.mxConnectionHandler"></a>mxConnectionHandler</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>function mxConnectionHandler(</td><td class="PParameter  prettyprint " nowrap>graph,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>factoryMethod</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Constructs an event handler that connects vertices using the specified factory method to create the new edges.&nbsp; Modify &lt;mxConstants.ACTIVE_REGION&gt; to setup the region on a cell which triggers the creation of a new connection or use connect icons as explained above.</p><h4 class=CHeading>Parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>graph</td><td class=CDLDescription>Reference to the enclosing <a href="../view/mxGraph-js.html#mxGraph" class=LClass id=link122 onMouseOver="ShowTip(event, 'tt5', 'link122')" onMouseOut="HideTip('tt5')">mxGraph</a>.</td></tr><tr><td class=CDLEntry>factoryMethod</td><td class=CDLDescription>Optional function to create the edge.&nbsp; The function takes the source and target <a href="../model/mxCell-js.html#mxCell" class=LClass id=link123 onMouseOver="ShowTip(event, 'tt89', 'link123')" onMouseOut="HideTip('tt89')">mxCell</a> as the first and second argument and an optional cell style from the preview as the third argument.&nbsp; It returns the <a href="../model/mxCell-js.html#mxCell" class=LClass id=link124 onMouseOver="ShowTip(event, 'tt89', 'link124')" onMouseOut="HideTip('tt89')">mxCell</a> that represents the new edge.</td></tr></table></div></div></div>

<div class="CVariable"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.graph"></a>graph</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxConnectionHandler.prototype.graph</td></tr></table></blockquote><p>Reference to the enclosing <a href="../view/mxGraph-js.html#mxGraph" class=LClass id=link125 onMouseOver="ShowTip(event, 'tt5', 'link125')" onMouseOut="HideTip('tt5')">mxGraph</a>.</p></div></div></div>

<div class="CVariable"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.factoryMethod"></a>factoryMethod</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxConnectionHandler.prototype.factoryMethod</td></tr></table></blockquote><p>Function that is used for creating new edges.&nbsp; The function takes the source and target <a href="../model/mxCell-js.html#mxCell" class=LClass id=link126 onMouseOver="ShowTip(event, 'tt89', 'link126')" onMouseOut="HideTip('tt89')">mxCell</a> as the first and second argument and returns a new <a href="../model/mxCell-js.html#mxCell" class=LClass id=link127 onMouseOver="ShowTip(event, 'tt89', 'link127')" onMouseOut="HideTip('tt89')">mxCell</a> that represents the edge.&nbsp; This is used in <a href="#mxConnectionHandler.createEdge" class=LFunction id=link128 onMouseOver="ShowTip(event, 'tt82', 'link128')" onMouseOut="HideTip('tt82')">createEdge</a>.</p></div></div></div>

<div class="CVariable"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.moveIconFront"></a>moveIconFront</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxConnectionHandler.prototype.moveIconFront</td></tr></table></blockquote><p>Specifies if icons should be displayed inside the graph container instead of the overlay pane.&nbsp; This is used for HTML labels on vertices which hide the connect icon.&nbsp; This has precendence over <a href="#mxConnectionHandler.moveIconBack" class=LVariable id=link129 onMouseOver="ShowTip(event, 'tt8', 'link129')" onMouseOut="HideTip('tt8')">moveIconBack</a> when set to true.&nbsp; Default is false.</p></div></div></div>

<div class="CVariable"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.moveIconBack"></a>moveIconBack</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxConnectionHandler.prototype.moveIconBack</td></tr></table></blockquote><p>Specifies if icons should be moved to the back of the overlay pane.&nbsp; This can be set to true if the icons of the connection handler conflict with other handles, such as the vertex label move handle.&nbsp; Default is false.</p></div></div></div>

<div class="CVariable"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.connectImage"></a>connectImage</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxConnectionHandler.prototype.connectImage</td></tr></table></blockquote><p><a href="../util/mxImage-js.html#mxImage" class=LClass id=link130 onMouseOver="ShowTip(event, 'tt10', 'link130')" onMouseOut="HideTip('tt10')">mxImage</a> that is used to trigger the creation of a new connection.&nbsp; This is used in <a href="#mxConnectionHandler.createIcons" class=LFunction id=link131 onMouseOver="ShowTip(event, 'tt53', 'link131')" onMouseOut="HideTip('tt53')">createIcons</a>.&nbsp; Default is null.</p></div></div></div>

<div class="CVariable"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.targetConnectImage"></a>targetConnectImage</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxConnectionHandler.prototype.targetConnectImage</td></tr></table></blockquote><p>Specifies if the connect icon should be centered on the target state while connections are being previewed.&nbsp; Default is false.</p></div></div></div>

<div class="CVariable"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.enabled"></a>enabled</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxConnectionHandler.prototype.enabled</td></tr></table></blockquote><p>Specifies if events are handled.&nbsp; Default is true.</p></div></div></div>

<div class="CVariable"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.select"></a>select</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxConnectionHandler.prototype.select</td></tr></table></blockquote><p>Specifies if new edges should be selected.&nbsp; Default is true.</p></div></div></div>

<div class="CVariable"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.createTarget"></a>createTarget</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxConnectionHandler.prototype.createTarget</td></tr></table></blockquote><p>Specifies if <a href="#mxConnectionHandler.createTargetVertex" class=LFunction id=link132 onMouseOver="ShowTip(event, 'tt15', 'link132')" onMouseOut="HideTip('tt15')">createTargetVertex</a> should be called if no target was under the mouse for the new connection.&nbsp; Setting this to true means the connection will be drawn as valid if no target is under the mouse, and <a href="#mxConnectionHandler.createTargetVertex" class=LFunction id=link133 onMouseOver="ShowTip(event, 'tt15', 'link133')" onMouseOut="HideTip('tt15')">createTargetVertex</a> will be called before the connection is created between the source cell and the newly created vertex in <a href="#mxConnectionHandler.createTargetVertex" class=LFunction id=link134 onMouseOver="ShowTip(event, 'tt15', 'link134')" onMouseOut="HideTip('tt15')">createTargetVertex</a>, which can be overridden to create a new target.&nbsp; Default is false.</p></div></div></div>

<div class="CVariable"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.marker"></a>marker</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxConnectionHandler.prototype.marker</td></tr></table></blockquote><p>Holds the &lt;mxTerminalMarker&gt; used for finding source and target cells.</p></div></div></div>

<div class="CVariable"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.constraintHandler"></a>constraintHandler</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxConnectionHandler.prototype.constraintHandler</td></tr></table></blockquote><p>Holds the <a href="mxConstraintHandler-js.html#mxConstraintHandler" class=LClass id=link135 onMouseOver="ShowTip(event, 'tt18', 'link135')" onMouseOut="HideTip('tt18')">mxConstraintHandler</a> used for drawing and highlighting constraints.</p></div></div></div>

<div class="CVariable"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.error"></a>error</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxConnectionHandler.prototype.error</td></tr></table></blockquote><p>Holds the current validation error while connections are being created.</p></div></div></div>

<div class="CVariable"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.waypointsEnabled"></a>waypointsEnabled</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxConnectionHandler.prototype.waypointsEnabled</td></tr></table></blockquote><p>Specifies if single clicks should add waypoints on the new edge.&nbsp; Default is false.</p></div></div></div>

<div class="CVariable"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.ignoreMouseDown"></a>ignoreMouseDown</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxConnectionHandler.prototype.ignoreMouseDown</td></tr></table></blockquote><p>Specifies if the connection handler should ignore the state of the mouse button when highlighting the source.&nbsp; Default is false, that is, the handler only highlights the source if no button is being pressed.</p></div></div></div>

<div class="CVariable"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.first"></a>first</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxConnectionHandler.prototype.first</td></tr></table></blockquote><p>Holds the <a href="../util/mxPoint-js.html#mxPoint" class=LClass id=link136 onMouseOver="ShowTip(event, 'tt23', 'link136')" onMouseOut="HideTip('tt23')">mxPoint</a> where the mouseDown took place while the handler is active.</p></div></div></div>

<div class="CVariable"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.connectIconOffset"></a>connectIconOffset</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxConnectionHandler.prototype.connectIconOffset</td></tr></table></blockquote><p>Holds the offset for connect icons during connection preview.&nbsp; Default is mxPoint(0, <a href="../util/mxConstants-js.html#mxConstants.TOOLTIP_VERTICAL_OFFSET" class=LVariable id=link137 onMouseOver="ShowTip(event, 'tt90', 'link137')" onMouseOut="HideTip('tt90')">mxConstants.TOOLTIP_VERTICAL_OFFSET</a>).&nbsp; Note that placing the icon under the mouse pointer with an offset of (0,0) will affect hit detection.</p></div></div></div>

<div class="CVariable"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.edgeState"></a>edgeState</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxConnectionHandler.prototype.edgeState</td></tr></table></blockquote><p>Optional <a href="../view/mxCellState-js.html#mxCellState" class=LClass id=link138 onMouseOver="ShowTip(event, 'tt26', 'link138')" onMouseOut="HideTip('tt26')">mxCellState</a> that represents the preview edge while the handler is active.&nbsp; This is created in <a href="#mxConnectionHandler.createEdgeState" class=LFunction id=link139 onMouseOver="ShowTip(event, 'tt61', 'link139')" onMouseOut="HideTip('tt61')">createEdgeState</a>.</p></div></div></div>

<div class="CVariable"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.changeHandler"></a>changeHandler</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxConnectionHandler.prototype.changeHandler</td></tr></table></blockquote><p>Holds the change event listener for later removal.</p></div></div></div>

<div class="CVariable"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.drillHandler"></a>drillHandler</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxConnectionHandler.prototype.drillHandler</td></tr></table></blockquote><p>Holds the drill event listener for later removal.</p></div></div></div>

<div class="CVariable"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.mouseDownCounter"></a>mouseDownCounter</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxConnectionHandler.prototype.mouseDownCounter</td></tr></table></blockquote><p>Counts the number of mouseDown events since the start.&nbsp; The initial mouse down event counts as 1.</p></div></div></div>

<div class="CVariable"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.movePreviewAway"></a>movePreviewAway</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxConnectionHandler.prototype.movePreviewAway</td></tr></table></blockquote><p>Switch to enable moving the preview away from the mousepointer.&nbsp; This is required in browsers where the preview cannot be made transparent to events and if the built-in hit detection on the HTML elements in the page should be used.&nbsp; Default is the value of <a href="../mxClient-js.html#mxClient.IS_VML" class=LVariable id=link140 onMouseOver="ShowTip(event, 'tt91', 'link140')" onMouseOut="HideTip('tt91')">mxClient.IS_VML</a>.</p></div></div></div>

<div class="CVariable"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.outlineConnect"></a>outlineConnect</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxConnectionHandler.prototype.outlineConnect</td></tr></table></blockquote><p>Specifies if connections to the outline of a highlighted target should be enabled.&nbsp; This will allow to place the connection point along the outline of the highlighted target.&nbsp; Default is false.</p></div></div></div>

<div class="CVariable"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.livePreview"></a>livePreview</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxConnectionHandler.prototype.livePreview</td></tr></table></blockquote><p>Specifies if the actual shape of the edge state should be used for the preview.&nbsp; Default is false.&nbsp; (Ignored if no edge state is created in <a href="#mxConnectionHandler.createEdgeState" class=LFunction id=link141 onMouseOver="ShowTip(event, 'tt61', 'link141')" onMouseOut="HideTip('tt61')">createEdgeState</a>.)</p></div></div></div>

<div class="CVariable"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.cursor"></a>cursor</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxConnectionHandler.prototype.cursor</td></tr></table></blockquote><p>Specifies the cursor to be used while the handler is active.&nbsp; Default is null.</p></div></div></div>

<div class="CVariable"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.insertBeforeSource"></a>insertBeforeSource</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxConnectionHandler.prototype.insertBeforeSource</td></tr></table></blockquote><p>Specifies if new edges should be inserted before the source vertex in the cell hierarchy.&nbsp; Default is false for backwards compatibility.</p></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.isEnabled"></a>isEnabled</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxConnectionHandler.prototype.isEnabled = function()</td></tr></table></blockquote><p>Returns true if events are handled.&nbsp; This implementation returns <a href="#mxConnectionHandler.enabled" class=LVariable id=link142 onMouseOver="ShowTip(event, 'tt12', 'link142')" onMouseOut="HideTip('tt12')">enabled</a>.</p></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.setEnabled"></a>setEnabled</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.setEnabled = function(</td><td class="PParameter  prettyprint " nowrap>enabled</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Enables or disables event handling.&nbsp; This implementation updates <a href="#mxConnectionHandler.enabled" class=LVariable id=link143 onMouseOver="ShowTip(event, 'tt12', 'link143')" onMouseOut="HideTip('tt12')">enabled</a>.</p><h4 class=CHeading>Parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>enabled</td><td class=CDLDescription>Boolean that specifies the new enabled state.</td></tr></table></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.isInsertBefore"></a>isInsertBefore</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.isInsertBefore = function(</td><td class="PParameter  prettyprint " nowrap>edge,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>source,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>target,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>evt,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>dropTarget</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Returns <a href="#mxConnectionHandler.insertBeforeSource" class=LVariable id=link144 onMouseOver="ShowTip(event, 'tt34', 'link144')" onMouseOut="HideTip('tt34')">insertBeforeSource</a> for non-loops and false for loops.</p><h4 class=CHeading>Parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>edge</td><td class=CDLDescription><a href="../model/mxCell-js.html#mxCell" class=LClass id=link145 onMouseOver="ShowTip(event, 'tt89', 'link145')" onMouseOut="HideTip('tt89')">mxCell</a> that represents the edge to be inserted.</td></tr><tr><td class=CDLEntry>source</td><td class=CDLDescription><a href="../model/mxCell-js.html#mxCell" class=LClass id=link146 onMouseOver="ShowTip(event, 'tt89', 'link146')" onMouseOut="HideTip('tt89')">mxCell</a> that represents the source terminal.</td></tr><tr><td class=CDLEntry>target</td><td class=CDLDescription><a href="../model/mxCell-js.html#mxCell" class=LClass id=link147 onMouseOver="ShowTip(event, 'tt89', 'link147')" onMouseOut="HideTip('tt89')">mxCell</a> that represents the target terminal.</td></tr><tr><td class=CDLEntry>evt</td><td class=CDLDescription>Mousedown event of the connect gesture.</td></tr><tr><td class=CDLEntry>dropTarget</td><td class=CDLDescription><a href="../model/mxCell-js.html#mxCell" class=LClass id=link148 onMouseOver="ShowTip(event, 'tt89', 'link148')" onMouseOut="HideTip('tt89')">mxCell</a> that represents the cell under the mouse when it was released.</td></tr></table></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.isCreateTarget"></a>isCreateTarget</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.isCreateTarget = function(</td><td class="PParameter  prettyprint " nowrap>evt</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Returns <a href="#mxConnectionHandler.createTarget" class=LVariable id=link149 onMouseOver="ShowTip(event, 'tt14', 'link149')" onMouseOut="HideTip('tt14')">createTarget</a>.</p><h4 class=CHeading>Parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>evt</td><td class=CDLDescription>Current active native pointer event.</td></tr></table></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.setCreateTarget"></a>setCreateTarget</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.setCreateTarget = function(</td><td class="PParameter  prettyprint " nowrap>value</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Sets <a href="#mxConnectionHandler.createTarget" class=LVariable id=link150 onMouseOver="ShowTip(event, 'tt14', 'link150')" onMouseOut="HideTip('tt14')">createTarget</a>.</p></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.createShape"></a>createShape</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxConnectionHandler.prototype.createShape = function()</td></tr></table></blockquote><p>Creates the preview shape for new connections.</p></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.init"></a>init</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxConnectionHandler.prototype.init = function()</td></tr></table></blockquote><p>Initializes the shapes required for this connection handler.&nbsp; This should be invoked if &lt;mxGraph.container&gt; is assigned after the connection handler has been created.</p></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.isConnectableCell"></a>isConnectableCell</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.isConnectableCell = function(</td><td class="PParameter  prettyprint " nowrap>cell</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Returns true if the given cell is connectable.&nbsp; This is a hook to disable floating connections.&nbsp; This implementation returns true.</p></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.createMarker"></a>createMarker</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxConnectionHandler.prototype.createMarker = function()</td></tr></table></blockquote><p>Creates and returns the <a href="mxCellMarker-js.html#mxCellMarker" class=LClass id=link151 onMouseOver="ShowTip(event, 'tt44', 'link151')" onMouseOut="HideTip('tt44')">mxCellMarker</a> used in <a href="#mxConnectionHandler.marker" class=LVariable id=link152 onMouseOver="ShowTip(event, 'tt16', 'link152')" onMouseOut="HideTip('tt16')">marker</a>.</p></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.start"></a>start</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.start = function(</td><td class="PParameter  prettyprint " nowrap>state,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>x,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>y,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>edgeState</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Starts a new connection for the given state and coordinates.</p></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.isConnecting"></a>isConnecting</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxConnectionHandler.prototype.isConnecting = function()</td></tr></table></blockquote><p>Returns true if the source terminal has been clicked and a new connection is currently being previewed.</p></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.isValidSource"></a>isValidSource</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.isValidSource = function(</td><td class="PParameter  prettyprint " nowrap>cell,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>me</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Returns <a href="../view/mxGraph-js.html#mxGraph.isValidSource" class=LFunction id=link153 onMouseOver="ShowTip(event, 'tt48', 'link153')" onMouseOut="HideTip('tt48')">mxGraph.isValidSource</a> for the given source terminal.</p><h4 class=CHeading>Parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>cell</td><td class=CDLDescription><a href="../model/mxCell-js.html#mxCell" class=LClass id=link154 onMouseOver="ShowTip(event, 'tt89', 'link154')" onMouseOut="HideTip('tt89')">mxCell</a> that represents the source terminal.</td></tr><tr><td class=CDLEntry>me</td><td class=CDLDescription><a href="../util/mxMouseEvent-js.html#mxMouseEvent" class=LClass id=link155 onMouseOver="ShowTip(event, 'tt92', 'link155')" onMouseOut="HideTip('tt92')">mxMouseEvent</a> that is associated with this call.</td></tr></table></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.isValidTarget"></a>isValidTarget</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.isValidTarget = function(</td><td class="PParameter  prettyprint " nowrap>cell</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Returns true.&nbsp; The call to <a href="../view/mxGraph-js.html#mxGraph.isValidTarget" class=LFunction id=link156 onMouseOver="ShowTip(event, 'tt93', 'link156')" onMouseOut="HideTip('tt93')">mxGraph.isValidTarget</a> is implicit by calling <a href="../view/mxGraph-js.html#mxGraph.getEdgeValidationError" class=LFunction id=link157 onMouseOver="ShowTip(event, 'tt94', 'link157')" onMouseOut="HideTip('tt94')">mxGraph.getEdgeValidationError</a> in <a href="#mxConnectionHandler.validateConnection" class=LFunction id=link158 onMouseOver="ShowTip(event, 'tt50', 'link158')" onMouseOut="HideTip('tt50')">validateConnection</a>.&nbsp; This is an additional hook for disabling certain targets in this specific handler.</p><h4 class=CHeading>Parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>cell</td><td class=CDLDescription><a href="../model/mxCell-js.html#mxCell" class=LClass id=link159 onMouseOver="ShowTip(event, 'tt89', 'link159')" onMouseOut="HideTip('tt89')">mxCell</a> that represents the target terminal.</td></tr></table></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.validateConnection"></a>validateConnection</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.validateConnection = function(</td><td class="PParameter  prettyprint " nowrap>source,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>target</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Returns the error message or an empty string if the connection for the given source target pair is not valid.&nbsp; Otherwise it returns null.&nbsp; This implementation uses <a href="../view/mxGraph-js.html#mxGraph.getEdgeValidationError" class=LFunction id=link160 onMouseOver="ShowTip(event, 'tt94', 'link160')" onMouseOut="HideTip('tt94')">mxGraph.getEdgeValidationError</a>.</p><h4 class=CHeading>Parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>source</td><td class=CDLDescription><a href="../model/mxCell-js.html#mxCell" class=LClass id=link161 onMouseOver="ShowTip(event, 'tt89', 'link161')" onMouseOut="HideTip('tt89')">mxCell</a> that represents the source terminal.</td></tr><tr><td class=CDLEntry>target</td><td class=CDLDescription><a href="../model/mxCell-js.html#mxCell" class=LClass id=link162 onMouseOver="ShowTip(event, 'tt89', 'link162')" onMouseOut="HideTip('tt89')">mxCell</a> that represents the target terminal.</td></tr></table></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.getConnectImage"></a>getConnectImage</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.getConnectImage = function(</td><td class="PParameter  prettyprint " nowrap>state</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Hook to return the <a href="../util/mxImage-js.html#mxImage" class=LClass id=link163 onMouseOver="ShowTip(event, 'tt10', 'link163')" onMouseOut="HideTip('tt10')">mxImage</a> used for the connection icon of the given <a href="../view/mxCellState-js.html#mxCellState" class=LClass id=link164 onMouseOver="ShowTip(event, 'tt26', 'link164')" onMouseOut="HideTip('tt26')">mxCellState</a>.&nbsp; This implementation returns <a href="#mxConnectionHandler.connectImage" class=LVariable id=link165 onMouseOver="ShowTip(event, 'tt9', 'link165')" onMouseOut="HideTip('tt9')">connectImage</a>.</p><h4 class=CHeading>Parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>state</td><td class=CDLDescription><a href="../view/mxCellState-js.html#mxCellState" class=LClass id=link166 onMouseOver="ShowTip(event, 'tt26', 'link166')" onMouseOut="HideTip('tt26')">mxCellState</a> whose connect image should be returned.</td></tr></table></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.isMoveIconToFrontForState"></a>isMoveIconToFrontForState</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.isMoveIconToFrontForState = function(</td><td class="PParameter  prettyprint " nowrap>state</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Returns true if the state has a HTML label in the graph&rsquo;s container, otherwise it returns <a href="#mxConnectionHandler.moveIconFront" class=LVariable id=link167 onMouseOver="ShowTip(event, 'tt7', 'link167')" onMouseOut="HideTip('tt7')">moveIconFront</a>.</p><h4 class=CHeading>Parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>state</td><td class=CDLDescription><a href="../view/mxCellState-js.html#mxCellState" class=LClass id=link168 onMouseOver="ShowTip(event, 'tt26', 'link168')" onMouseOut="HideTip('tt26')">mxCellState</a> whose connect icons should be returned.</td></tr></table></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.createIcons"></a>createIcons</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.createIcons = function(</td><td class="PParameter  prettyprint " nowrap>state</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Creates the array <a href="../shape/mxImageShape-js.html#mxImageShape" class=LClass id=link169 onMouseOver="ShowTip(event, 'tt54', 'link169')" onMouseOut="HideTip('tt54')">mxImageShapes</a> that represent the connect icons for the given <a href="../view/mxCellState-js.html#mxCellState" class=LClass id=link170 onMouseOver="ShowTip(event, 'tt26', 'link170')" onMouseOut="HideTip('tt26')">mxCellState</a>.</p><h4 class=CHeading>Parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>state</td><td class=CDLDescription><a href="../view/mxCellState-js.html#mxCellState" class=LClass id=link171 onMouseOver="ShowTip(event, 'tt26', 'link171')" onMouseOut="HideTip('tt26')">mxCellState</a> whose connect icons should be returned.</td></tr></table></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.redrawIcons"></a>redrawIcons</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.redrawIcons = function(</td><td class="PParameter  prettyprint " nowrap>icons,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>state</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Redraws the given array of <a href="../shape/mxImageShape-js.html#mxImageShape" class=LClass id=link172 onMouseOver="ShowTip(event, 'tt54', 'link172')" onMouseOut="HideTip('tt54')">mxImageShapes</a>.</p><h4 class=CHeading>Parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>icons</td><td class=CDLDescription>Optional array of <a href="../shape/mxImageShape-js.html#mxImageShape" class=LClass id=link173 onMouseOver="ShowTip(event, 'tt54', 'link173')" onMouseOut="HideTip('tt54')">mxImageShapes</a> to be redrawn.</td></tr></table></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.getIconPosition"></a>getIconPosition</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.getIconPosition = function(</td><td class="PParameter  prettyprint " nowrap>icon,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>state</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Returns the center position of the given icon.</p><h4 class=CHeading>Parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>icon</td><td class=CDLDescription>The connect icon of <a href="../shape/mxImageShape-js.html#mxImageShape" class=LClass id=link174 onMouseOver="ShowTip(event, 'tt54', 'link174')" onMouseOut="HideTip('tt54')">mxImageShape</a> with the mouse.</td></tr><tr><td class=CDLEntry>state</td><td class=CDLDescription><a href="../view/mxCellState-js.html#mxCellState" class=LClass id=link175 onMouseOver="ShowTip(event, 'tt26', 'link175')" onMouseOut="HideTip('tt26')">mxCellState</a> under the mouse.</td></tr></table></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.destroyIcons"></a>destroyIcons</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxConnectionHandler.prototype.destroyIcons = function()</td></tr></table></blockquote><p>Destroys the connect icons and resets the respective state.</p></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.isStartEvent"></a>isStartEvent</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.isStartEvent = function(</td><td class="PParameter  prettyprint " nowrap>me</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Returns true if the given mouse down event should start this handler.&nbsp; The This implementation returns true if the event does not force marquee selection, and the currentConstraint and currentFocus of the <a href="#mxConnectionHandler.constraintHandler" class=LVariable id=link176 onMouseOver="ShowTip(event, 'tt17', 'link176')" onMouseOut="HideTip('tt17')">constraintHandler</a> are not null, or &lt;previous&gt; and <a href="#mxConnectionHandler.error" class=LVariable id=link177 onMouseOver="ShowTip(event, 'tt19', 'link177')" onMouseOut="HideTip('tt19')">error</a> are not null and &lt;icons&gt; is null or &lt;icons&gt; and &lt;icon&gt; are not null.</p></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.mouseDown"></a>mouseDown</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.mouseDown = function(</td><td class="PParameter  prettyprint " nowrap>sender,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>me</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Handles the event by initiating a new connection.</p></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.isImmediateConnectSource"></a>isImmediateConnectSource</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.isImmediateConnectSource = function(</td><td class="PParameter  prettyprint " nowrap>state</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Returns true if a tap on the given source state should immediately start connecting.&nbsp; This implementation returns true if the state is not movable in the graph.</p></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.createEdgeState"></a>createEdgeState</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.createEdgeState = function(</td><td class="PParameter  prettyprint " nowrap>me</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Hook to return an <a href="../view/mxCellState-js.html#mxCellState" class=LClass id=link178 onMouseOver="ShowTip(event, 'tt26', 'link178')" onMouseOut="HideTip('tt26')">mxCellState</a> which may be used during the preview.&nbsp; This implementation returns null.</p><h4 class=CHeading>Use the following code to create a preview for an existing edge style</h4><blockquote><pre class="prettyprint">graph.connectionHandler.createEdgeState = function(me)
{
  var edge = graph.createEdge(null, null, null, null, null, 'edgeStyle=elbowEdgeStyle');

  return new mxCellState(this.graph.view, edge, this.graph.getCellStyle(edge));
};</pre></blockquote></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.isOutlineConnectEvent"></a>isOutlineConnectEvent</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.isOutlineConnectEvent = function(</td><td class="PParameter  prettyprint " nowrap>me</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Returns true if <a href="#mxConnectionHandler.outlineConnect" class=LVariable id=link179 onMouseOver="ShowTip(event, 'tt31', 'link179')" onMouseOut="HideTip('tt31')">outlineConnect</a> is true and the source of the event is the outline shape or shift is pressed.</p></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.updateCurrentState"></a>updateCurrentState</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.updateCurrentState = function(</td><td class="PParameter  prettyprint " nowrap>me,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>point</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Updates the current state for a given mouse move event by using the <a href="#mxConnectionHandler.marker" class=LVariable id=link180 onMouseOver="ShowTip(event, 'tt16', 'link180')" onMouseOut="HideTip('tt16')">marker</a>.</p></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.isCellEnabled"></a>isCellEnabled</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.isCellEnabled = function(</td><td class="PParameter  prettyprint " nowrap>cell</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Returns true if the given cell allows new connections to be created.&nbsp; This implementation always returns true.</p></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.convertWaypoint"></a>convertWaypoint</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.convertWaypoint = function(</td><td class="PParameter  prettyprint " nowrap>point</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Converts the given point from screen coordinates to model coordinates.</p></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.snapToPreview"></a>snapToPreview</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.snapToPreview = function(</td><td class="PParameter  prettyprint " nowrap>me,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>point</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Called to snap the given point to the current preview.&nbsp; This snaps to the first point of the preview if alt is not pressed.</p></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.mouseMove"></a>mouseMove</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.mouseMove = function(</td><td class="PParameter  prettyprint " nowrap>sender,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>me</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Handles the event by updating the preview edge or by highlighting a possible source or target terminal.</p></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.updateEdgeState"></a>updateEdgeState</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.updateEdgeState = function(</td><td class="PParameter  prettyprint " nowrap>current,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>constraint</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Updates <a href="#mxConnectionHandler.edgeState" class=LVariable id=link181 onMouseOver="ShowTip(event, 'tt25', 'link181')" onMouseOut="HideTip('tt25')">edgeState</a>.</p></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.getTargetPerimeterPoint"></a>getTargetPerimeterPoint</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.getTargetPerimeterPoint = function(</td><td class="PParameter  prettyprint " nowrap>state,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>me</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Returns the perimeter point for the given target state.</p><h4 class=CHeading>Parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>state</td><td class=CDLDescription><a href="../view/mxCellState-js.html#mxCellState" class=LClass id=link182 onMouseOver="ShowTip(event, 'tt26', 'link182')" onMouseOut="HideTip('tt26')">mxCellState</a> that represents the target cell state.</td></tr><tr><td class=CDLEntry>me</td><td class=CDLDescription><a href="../util/mxMouseEvent-js.html#mxMouseEvent" class=LClass id=link183 onMouseOver="ShowTip(event, 'tt92', 'link183')" onMouseOut="HideTip('tt92')">mxMouseEvent</a> that represents the mouse move.</td></tr></table></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.getSourcePerimeterPoint"></a>getSourcePerimeterPoint</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.getSourcePerimeterPoint = function(</td><td class="PParameter  prettyprint " nowrap>state,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>next,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>me</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Hook to update the icon position(s) based on a mouseOver event.&nbsp; This is an empty implementation.</p><h4 class=CHeading>Parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>state</td><td class=CDLDescription><a href="../view/mxCellState-js.html#mxCellState" class=LClass id=link184 onMouseOver="ShowTip(event, 'tt26', 'link184')" onMouseOut="HideTip('tt26')">mxCellState</a> that represents the target cell state.</td></tr><tr><td class=CDLEntry>next</td><td class=CDLDescription><a href="../util/mxPoint-js.html#mxPoint" class=LClass id=link185 onMouseOver="ShowTip(event, 'tt23', 'link185')" onMouseOut="HideTip('tt23')">mxPoint</a> that represents the next point along the previewed edge.</td></tr><tr><td class=CDLEntry>me</td><td class=CDLDescription><a href="../util/mxMouseEvent-js.html#mxMouseEvent" class=LClass id=link186 onMouseOver="ShowTip(event, 'tt92', 'link186')" onMouseOut="HideTip('tt92')">mxMouseEvent</a> that represents the mouse move.</td></tr></table></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.updateIcons"></a>updateIcons</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.updateIcons = function(</td><td class="PParameter  prettyprint " nowrap>state,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>icons,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>me</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Hook to update the icon position(s) based on a mouseOver event.&nbsp; This is an empty implementation.</p><h4 class=CHeading>Parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>state</td><td class=CDLDescription><a href="../view/mxCellState-js.html#mxCellState" class=LClass id=link187 onMouseOver="ShowTip(event, 'tt26', 'link187')" onMouseOut="HideTip('tt26')">mxCellState</a> under the mouse.</td></tr><tr><td class=CDLEntry>icons</td><td class=CDLDescription>Array of currently displayed icons.</td></tr><tr><td class=CDLEntry>me</td><td class=CDLDescription><a href="../util/mxMouseEvent-js.html#mxMouseEvent" class=LClass id=link188 onMouseOver="ShowTip(event, 'tt92', 'link188')" onMouseOut="HideTip('tt92')">mxMouseEvent</a> that contains the mouse event.</td></tr></table></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.isStopEvent"></a>isStopEvent</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.isStopEvent = function(</td><td class="PParameter  prettyprint " nowrap>me</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Returns true if the given mouse up event should stop this handler.&nbsp; The connection will be created if <a href="#mxConnectionHandler.error" class=LVariable id=link189 onMouseOver="ShowTip(event, 'tt19', 'link189')" onMouseOut="HideTip('tt19')">error</a> is null.&nbsp; Note that this is only called if <a href="#mxConnectionHandler.waypointsEnabled" class=LVariable id=link190 onMouseOver="ShowTip(event, 'tt20', 'link190')" onMouseOut="HideTip('tt20')">waypointsEnabled</a> is true.&nbsp; This implemtation returns true if there is a cell state in the given event.</p></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.addWaypoint"></a>addWaypoint</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.addWaypointForEvent = function(</td><td class="PParameter  prettyprint " nowrap>me</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Adds the waypoint for the given event to &lt;waypoints&gt;.</p></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.checkConstraints"></a>checkConstraints</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.checkConstraints = function(</td><td class="PParameter  prettyprint " nowrap>c1,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>c2</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Returns true if the connection for the given constraints is valid.&nbsp; This implementation returns true if the constraints are not pointing to the same fixed connection point.</p></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.mouseUp"></a>mouseUp</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.mouseUp = function(</td><td class="PParameter  prettyprint " nowrap>sender,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>me</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Handles the event by inserting the new connection.</p></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.reset"></a>reset</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxConnectionHandler.prototype.reset = function()</td></tr></table></blockquote><p>Resets the state of this handler.</p></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.drawPreview"></a>drawPreview</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxConnectionHandler.prototype.drawPreview = function()</td></tr></table></blockquote><p>Redraws the preview edge using the color and width returned by <a href="#mxConnectionHandler.getEdgeColor" class=LFunction id=link191 onMouseOver="ShowTip(event, 'tt77', 'link191')" onMouseOut="HideTip('tt77')">getEdgeColor</a> and <a href="#mxConnectionHandler.getEdgeWidth" class=LFunction id=link192 onMouseOver="ShowTip(event, 'tt78', 'link192')" onMouseOut="HideTip('tt78')">getEdgeWidth</a>.</p></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.getEdgeColor"></a>getEdgeColor</h3><div class=CBody><p>Returns the color used to draw the preview edge.&nbsp; This returns green if there is no edge validation error and red otherwise.</p><h4 class=CHeading>Parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>valid</td><td class=CDLDescription>Boolean indicating if the color for a valid edge should be returned.</td></tr></table></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.getEdgeColor"></a>getEdgeColor</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.getEdgeColor = function(</td><td class="PParameter  prettyprint " nowrap>valid</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Returns the color used to draw the preview edge.&nbsp; This returns green if there is no edge validation error and red otherwise.</p><h4 class=CHeading>Parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>valid</td><td class=CDLDescription>Boolean indicating if the color for a valid edge should be returned.</td></tr></table></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.getEdgeWidth"></a>getEdgeWidth</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.getEdgeWidth = function(</td><td class="PParameter  prettyprint " nowrap>valid</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Returns the width used to draw the preview edge.&nbsp; This returns 3 if there is no edge validation error and 1 otherwise.</p><h4 class=CHeading>Parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>valid</td><td class=CDLDescription>Boolean indicating if the width for a valid edge should be returned.</td></tr></table></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.connect"></a>connect</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.connect = function(</td><td class="PParameter  prettyprint " nowrap>source,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>target,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>evt,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>dropTarget</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Connects the given source and target using a new edge.&nbsp; This implementation uses <a href="#mxConnectionHandler.createEdge" class=LFunction id=link193 onMouseOver="ShowTip(event, 'tt82', 'link193')" onMouseOut="HideTip('tt82')">createEdge</a> to create the edge.</p><h4 class=CHeading>Parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>source</td><td class=CDLDescription><a href="../model/mxCell-js.html#mxCell" class=LClass id=link194 onMouseOver="ShowTip(event, 'tt89', 'link194')" onMouseOut="HideTip('tt89')">mxCell</a> that represents the source terminal.</td></tr><tr><td class=CDLEntry>target</td><td class=CDLDescription><a href="../model/mxCell-js.html#mxCell" class=LClass id=link195 onMouseOver="ShowTip(event, 'tt89', 'link195')" onMouseOut="HideTip('tt89')">mxCell</a> that represents the target terminal.</td></tr><tr><td class=CDLEntry>evt</td><td class=CDLDescription>Mousedown event of the connect gesture.</td></tr><tr><td class=CDLEntry>dropTarget</td><td class=CDLDescription><a href="../model/mxCell-js.html#mxCell" class=LClass id=link196 onMouseOver="ShowTip(event, 'tt89', 'link196')" onMouseOut="HideTip('tt89')">mxCell</a> that represents the cell under the mouse when it was released.</td></tr></table></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.selectCells"></a>selectCells</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.selectCells = function(</td><td class="PParameter  prettyprint " nowrap>edge,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>target</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Selects the given edge after adding a new connection.&nbsp; The target argument contains the target vertex if one has been inserted.</p></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.insertEdge"></a>insertEdge</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.insertEdge = function(</td><td class="PParameter  prettyprint " nowrap>parent,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>id,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>value,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>source,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>target,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>style</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Creates, inserts and returns the new edge for the given parameters.&nbsp; This implementation does only use <a href="#mxConnectionHandler.createEdge" class=LFunction id=link197 onMouseOver="ShowTip(event, 'tt82', 'link197')" onMouseOut="HideTip('tt82')">createEdge</a> if <a href="#mxConnectionHandler.factoryMethod" class=LVariable id=link198 onMouseOver="ShowTip(event, 'tt6', 'link198')" onMouseOut="HideTip('tt6')">factoryMethod</a> is defined, otherwise <a href="../view/mxGraph-js.html#mxGraph.insertEdge" class=LFunction id=link199 onMouseOver="ShowTip(event, 'tt95', 'link199')" onMouseOut="HideTip('tt95')">mxGraph.insertEdge</a> will be used.</p></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.createTargetVertex"></a>createTargetVertex</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.createTargetVertex = function(</td><td class="PParameter  prettyprint " nowrap>evt,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>source</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Hook method for creating new vertices on the fly if no target was under the mouse.&nbsp; This is only called if <a href="#mxConnectionHandler.createTarget" class=LVariable id=link200 onMouseOver="ShowTip(event, 'tt14', 'link200')" onMouseOut="HideTip('tt14')">createTarget</a> is true and returns null.</p><h4 class=CHeading>Parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>evt</td><td class=CDLDescription>Mousedown event of the connect gesture.</td></tr><tr><td class=CDLEntry>source</td><td class=CDLDescription><a href="../model/mxCell-js.html#mxCell" class=LClass id=link201 onMouseOver="ShowTip(event, 'tt89', 'link201')" onMouseOut="HideTip('tt89')">mxCell</a> that represents the source terminal.</td></tr></table></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.getAlignmentTolerance"></a>getAlignmentTolerance</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.getAlignmentTolerance = function(</td><td class="PParameter  prettyprint " nowrap>evt</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Returns the tolerance for aligning new targets to sources.&nbsp; This returns the grid size / 2.</p></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.createEdge"></a>createEdge</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.createEdge = function(</td><td class="PParameter  prettyprint " nowrap>value,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>source,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>target,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>style</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Creates and returns a new edge using <a href="#mxConnectionHandler.factoryMethod" class=LVariable id=link202 onMouseOver="ShowTip(event, 'tt6', 'link202')" onMouseOut="HideTip('tt6')">factoryMethod</a> if one exists.&nbsp; If no factory method is defined, then a new default edge is returned.&nbsp; The source and target arguments are informal, the actual connection is setup later by the caller of this function.</p><h4 class=CHeading>Parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>value</td><td class=CDLDescription>Value to be used for creating the edge.</td></tr><tr><td class=CDLEntry>source</td><td class=CDLDescription><a href="../model/mxCell-js.html#mxCell" class=LClass id=link203 onMouseOver="ShowTip(event, 'tt89', 'link203')" onMouseOut="HideTip('tt89')">mxCell</a> that represents the source terminal.</td></tr><tr><td class=CDLEntry>target</td><td class=CDLDescription><a href="../model/mxCell-js.html#mxCell" class=LClass id=link204 onMouseOver="ShowTip(event, 'tt89', 'link204')" onMouseOut="HideTip('tt89')">mxCell</a> that represents the target terminal.</td></tr><tr><td class=CDLEntry>style</td><td class=CDLDescription>Optional style from the preview edge.</td></tr></table></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.destroy"></a>destroy</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxConnectionHandler.prototype.destroy = function()</td></tr></table></blockquote><p>Destroys the handler and all its resources and DOM nodes.&nbsp; This should be called on all instances.&nbsp; It is called automatically for the built-in instance created for each <a href="../view/mxGraph-js.html#mxGraph" class=LClass id=link205 onMouseOver="ShowTip(event, 'tt5', 'link205')" onMouseOut="HideTip('tt5')">mxGraph</a>.</p></div></div></div>

</div><!--Content-->


<div id=Footer><a href="http://www.naturaldocs.org">Generated by Natural Docs</a></div><!--Footer-->


<div id=Menu><div class=MEntry><div class=MFile><a href="../index-txt.html">API Specification</a></div></div><div class=MEntry><div class=MGroup><a href="javascript:ToggleMenu('MGroupContent1')">Editor</a><div class=MGroupContent id=MGroupContent1><div class=MEntry><div class=MFile><a href="../editor/mxDefaultKeyHandler-js.html">mxDefaultKeyHandler</a></div></div><div class=MEntry><div class=MFile><a href="../editor/mxDefaultPopupMenu-js.html">mxDefaultPopupMenu</a></div></div><div class=MEntry><div class=MFile><a href="../editor/mxDefaultToolbar-js.html">mxDefaultToolbar</a></div></div><div class=MEntry><div class=MFile><a href="../editor/mxEditor-js.html">mxEditor</a></div></div></div></div></div><div class=MEntry><div class=MGroup><a href="javascript:ToggleMenu('MGroupContent2')">Handler</a><div class=MGroupContent id=MGroupContent2><div class=MEntry><div class=MFile><a href="mxCellHighlight-js.html">mxCellHighlight</a></div></div><div class=MEntry><div class=MFile><a href="mxCellMarker-js.html">mxCellMarker</a></div></div><div class=MEntry><div class=MFile><a href="mxCellTracker-js.html">mxCellTracker</a></div></div><div class=MEntry><div class=MFile id=MSelected>mxConnectionHandler</div></div><div class=MEntry><div class=MFile><a href="mxConstraintHandler-js.html">mxConstraintHandler</a></div></div><div class=MEntry><div class=MFile><a href="mxEdgeHandler-js.html">mxEdgeHandler</a></div></div><div class=MEntry><div class=MFile><a href="mxEdgeSegmentHandler-js.html">mxEdgeSegmentHandler.js</a></div></div><div class=MEntry><div class=MFile><a href="mxElbowEdgeHandler-js.html">mxElbowEdgeHandler</a></div></div><div class=MEntry><div class=MFile><a href="mxGraphHandler-js.html">mxGraphHandler</a></div></div><div class=MEntry><div class=MFile><a href="mxHandle-js.html">mxHandle</a></div></div><div class=MEntry><div class=MFile><a href="mxKeyHandler-js.html">mxKeyHandler</a></div></div><div class=MEntry><div class=MFile><a href="mxPanningHandler-js.html">mxPanningHandler</a></div></div><div class=MEntry><div class=MFile><a href="mxPopupMenuHandler-js.html">mxPopupMenuHandler</a></div></div><div class=MEntry><div class=MFile><a href="mxRubberband-js.html">mxRubberband</a></div></div><div class=MEntry><div class=MFile><a href="mxSelectionCellsHandler-js.html">mxSelectionCellsHandler</a></div></div><div class=MEntry><div class=MFile><a href="mxTooltipHandler-js.html">mxTooltipHandler</a></div></div><div class=MEntry><div class=MFile><a href="mxVertexHandler-js.html">mxVertexHandler</a></div></div></div></div></div><div class=MEntry><div class=MGroup><a href="javascript:ToggleMenu('MGroupContent3')">Io</a><div class=MGroupContent id=MGroupContent3><div class=MEntry><div class=MFile><a href="../io/mxCellCodec-js.html">mxCellCodec</a></div></div><div class=MEntry><div class=MFile><a href="../io/mxChildChangeCodec-js.html">mxChildChangeCodec</a></div></div><div class=MEntry><div class=MFile><a href="../io/mxCodec-js.html">mxCodec</a></div></div><div class=MEntry><div class=MFile><a href="../io/mxCodecRegistry-js.html">mxCodecRegistry</a></div></div><div class=MEntry><div class=MFile><a href="../io/mxDefaultKeyHandlerCodec-js.html">mxDefaultKeyHandlerCodec</a></div></div><div class=MEntry><div class=MFile><a href="../io/mxDefaultPopupMenuCodec-js.html">mxDefaultPopupMenuCodec</a></div></div><div class=MEntry><div class=MFile><a href="../io/mxDefaultToolbarCodec-js.html">mxDefaultToolbarCodec</a></div></div><div class=MEntry><div class=MFile><a href="../io/mxEditorCodec-js.html">mxEditorCodec</a></div></div><div class=MEntry><div class=MFile><a href="../io/mxGenericChangeCodec-js.html">mxGenericChangeCodec</a></div></div><div class=MEntry><div class=MFile><a href="../io/mxGraphCodec-js.html">mxGraphCodec</a></div></div><div class=MEntry><div class=MFile><a href="../io/mxGraphViewCodec-js.html">mxGraphViewCodec</a></div></div><div class=MEntry><div class=MFile><a href="../io/mxModelCodec-js.html">mxModelCodec</a></div></div><div class=MEntry><div class=MFile><a href="../io/mxObjectCodec-js.html">mxObjectCodec</a></div></div><div class=MEntry><div class=MFile><a href="../io/mxRootChangeCodec-js.html">mxRootChangeCodec</a></div></div><div class=MEntry><div class=MFile><a href="../io/mxStylesheetCodec-js.html">mxStylesheetCodec</a></div></div><div class=MEntry><div class=MFile><a href="../io/mxTerminalChangeCodec-js.html">mxTerminalChangeCodec</a></div></div></div></div></div><div class=MEntry><div class=MGroup><a href="javascript:ToggleMenu('MGroupContent7')">Layout</a><div class=MGroupContent id=MGroupContent7><div class=MEntry><div class=MGroup><a href="javascript:ToggleMenu('MGroupContent6')">Hierarchical</a><div class=MGroupContent id=MGroupContent6><div class=MEntry><div class=MGroup><a href="javascript:ToggleMenu('MGroupContent4')">Model</a><div class=MGroupContent id=MGroupContent4><div class=MEntry><div class=MFile><a href="../layout/hierarchical/model/mxGraphAbstractHierarchyCell-js.html">mxGraphAbstractHierarchyCell</a></div></div><div class=MEntry><div class=MFile><a href="../layout/hierarchical/model/mxGraphHierarchyEdge-js.html">mxGraphHierarchyEdge</a></div></div><div class=MEntry><div class=MFile><a href="../layout/hierarchical/model/mxGraphHierarchyModel-js.html">mxGraphHierarchyModel</a></div></div><div class=MEntry><div class=MFile><a href="../layout/hierarchical/model/mxGraphHierarchyNode-js.html">mxGraphHierarchyNode</a></div></div><div class=MEntry><div class=MFile><a href="../layout/hierarchical/model/mxSwimlaneModel-js.html">mxSwimlaneModel</a></div></div></div></div></div><div class=MEntry><div class=MFile><a href="../layout/hierarchical/mxHierarchicalLayout-js.html">mxHierarchicalLayout</a></div></div><div class=MEntry><div class=MFile><a href="../layout/hierarchical/mxSwimlaneLayout-js.html">mxSwimlaneLayout</a></div></div><div class=MEntry><div class=MGroup><a href="javascript:ToggleMenu('MGroupContent5')">Stage</a><div class=MGroupContent id=MGroupContent5><div class=MEntry><div class=MFile><a href="../layout/hierarchical/stage/mxCoordinateAssignment-js.html">mxCoordinateAssignment</a></div></div><div class=MEntry><div class=MFile><a href="../layout/hierarchical/stage/mxHierarchicalLayoutStage-js.html">mxHierarchicalLayoutStage</a></div></div><div class=MEntry><div class=MFile><a href="../layout/hierarchical/stage/mxMedianHybridCrossingReduction-js.html">mxMedianHybridCrossingReduction</a></div></div><div class=MEntry><div class=MFile><a href="../layout/hierarchical/stage/mxMinimumCycleRemover-js.html">mxMinimumCycleRemover</a></div></div><div class=MEntry><div class=MFile><a href="../layout/hierarchical/stage/mxSwimlaneOrdering-js.html">mxSwimlaneOrdering</a></div></div></div></div></div></div></div></div><div class=MEntry><div class=MFile><a href="../layout/mxCircleLayout-js.html">mxCircleLayout</a></div></div><div class=MEntry><div class=MFile><a href="../layout/mxCompactTreeLayout-js.html">mxCompactTreeLayout</a></div></div><div class=MEntry><div class=MFile><a href="../layout/mxCompositeLayout-js.html">mxCompositeLayout</a></div></div><div class=MEntry><div class=MFile><a href="../layout/mxEdgeLabelLayout-js.html">mxEdgeLabelLayout</a></div></div><div class=MEntry><div class=MFile><a href="../layout/mxFastOrganicLayout-js.html">mxFastOrganicLayout</a></div></div><div class=MEntry><div class=MFile><a href="../layout/mxGraphLayout-js.html">mxGraphLayout</a></div></div><div class=MEntry><div class=MFile><a href="../layout/mxParallelEdgeLayout-js.html">mxParallelEdgeLayout</a></div></div><div class=MEntry><div class=MFile><a href="../layout/mxPartitionLayout-js.html">mxPartitionLayout</a></div></div><div class=MEntry><div class=MFile><a href="../layout/mxRadialTreeLayout-js.html">mxRadialTreeLayout</a></div></div><div class=MEntry><div class=MFile><a href="../layout/mxStackLayout-js.html">mxStackLayout</a></div></div></div></div></div><div class=MEntry><div class=MGroup><a href="javascript:ToggleMenu('MGroupContent8')">Model</a><div class=MGroupContent id=MGroupContent8><div class=MEntry><div class=MFile><a href="../model/mxCell-js.html">mxCell</a></div></div><div class=MEntry><div class=MFile><a href="../model/mxCellPath-js.html">mxCellPath</a></div></div><div class=MEntry><div class=MFile><a href="../model/mxGeometry-js.html">mxGeometry</a></div></div><div class=MEntry><div class=MFile><a href="../model/mxGraphModel-js.html">mxGraphModel</a></div></div></div></div></div><div class=MEntry><div class=MFile><a href="../mxClient-js.html">mxClient</a></div></div><div class=MEntry><div class=MGroup><a href="javascript:ToggleMenu('MGroupContent9')">Shape</a><div class=MGroupContent id=MGroupContent9><div class=MEntry><div class=MFile><a href="../shape/mxActor-js.html">mxActor</a></div></div><div class=MEntry><div class=MFile><a href="../shape/mxArrow-js.html">mxArrow</a></div></div><div class=MEntry><div class=MFile><a href="../shape/mxArrowConnector-js.html">mxArrowConnector</a></div></div><div class=MEntry><div class=MFile><a href="../shape/mxCloud-js.html">mxCloud</a></div></div><div class=MEntry><div class=MFile><a href="../shape/mxConnector-js.html">mxConnector</a></div></div><div class=MEntry><div class=MFile><a href="../shape/mxCylinder-js.html">mxCylinder</a></div></div><div class=MEntry><div class=MFile><a href="../shape/mxDoubleEllipse-js.html">mxDoubleEllipse</a></div></div><div class=MEntry><div class=MFile><a href="../shape/mxEllipse-js.html">mxEllipse</a></div></div><div class=MEntry><div class=MFile><a href="../shape/mxHexagon-js.html">mxHexagon</a></div></div><div class=MEntry><div class=MFile><a href="../shape/mxImageShape-js.html">mxImageShape</a></div></div><div class=MEntry><div class=MFile><a href="../shape/mxLabel-js.html">mxLabel</a></div></div><div class=MEntry><div class=MFile><a href="../shape/mxLine-js.html">mxLine</a></div></div><div class=MEntry><div class=MFile><a href="../shape/mxMarker-js.html">mxMarker</a></div></div><div class=MEntry><div class=MFile><a href="../shape/mxPolyline-js.html">mxPolyline</a></div></div><div class=MEntry><div class=MFile><a href="../shape/mxRectangleShape-js.html">mxRectangleShape</a></div></div><div class=MEntry><div class=MFile><a href="../shape/mxRhombus-js.html">mxRhombus</a></div></div><div class=MEntry><div class=MFile><a href="../shape/mxShape-js.html">mxShape</a></div></div><div class=MEntry><div class=MFile><a href="../shape/mxStencil-js.html">mxStencil</a></div></div><div class=MEntry><div class=MFile><a href="../shape/mxStencilRegistry-js.html">mxStencilRegistry</a></div></div><div class=MEntry><div class=MFile><a href="../shape/mxSwimlane-js.html">mxSwimlane</a></div></div><div class=MEntry><div class=MFile><a href="../shape/mxText-js.html">mxText</a></div></div><div class=MEntry><div class=MFile><a href="../shape/mxTriangle-js.html">mxTriangle</a></div></div></div></div></div><div class=MEntry><div class=MGroup><a href="javascript:ToggleMenu('MGroupContent10')">Util</a><div class=MGroupContent id=MGroupContent10><div class=MEntry><div class=MFile><a href="../util/mxAbstractCanvas2D-js.html">mxAbstractCanvas2D</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxAnimation-js.html">mxAnimation</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxAutoSaveManager-js.html">mxAutoSaveManager</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxClipboard-js.html">mxClipboard</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxConstants-js.html">mxConstants</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxDictionary-js.html">mxDictionary</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxDivResizer-js.html">mxDivResizer</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxDragSource-js.html">mxDragSource</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxEffects-js.html">mxEffects</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxEvent-js.html">mxEvent</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxEventObject-js.html">mxEventObject</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxEventSource-js.html">mxEventSource</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxForm-js.html">mxForm</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxGuide-js.html">mxGuide</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxImage-js.html">mxImage</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxImageBundle-js.html">mxImageBundle</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxImageExport-js.html">mxImageExport</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxLog-js.html">mxLog</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxMorphing-js.html">mxMorphing</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxMouseEvent-js.html">mxMouseEvent</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxObjectIdentity-js.html">mxObjectIdentity</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxPanningManager-js.html">mxPanningManager</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxPoint-js.html">mxPoint</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxPopupMenu-js.html">mxPopupMenu</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxRectangle-js.html">mxRectangle</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxResources-js.html">mxResources</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxSvgCanvas2D-js.html">mxSvgCanvas2D</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxToolbar-js.html">mxToolbar</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxUndoableEdit-js.html">mxUndoableEdit</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxUndoManager-js.html">mxUndoManager</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxUrlConverter-js.html">mxUrlConverter</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxUtils-js.html">mxUtils</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxVmlCanvas2D-js.html">mxVmlCanvas2D</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxWindow-js.html">mxWindow</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxXmlCanvas2D-js.html">mxXmlCanvas2D</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxXmlRequest-js.html">mxXmlRequest</a></div></div></div></div></div><div class=MEntry><div class=MGroup><a href="javascript:ToggleMenu('MGroupContent11')">View</a><div class=MGroupContent id=MGroupContent11><div class=MEntry><div class=MFile><a href="../view/mxCellEditor-js.html">mxCellEditor</a></div></div><div class=MEntry><div class=MFile><a href="../view/mxCellOverlay-js.html">mxCellOverlay</a></div></div><div class=MEntry><div class=MFile><a href="../view/mxCellRenderer-js.html">mxCellRenderer</a></div></div><div class=MEntry><div class=MFile><a href="../view/mxCellState-js.html">mxCellState</a></div></div><div class=MEntry><div class=MFile><a href="../view/mxCellStatePreview-js.html">mxCellStatePreview</a></div></div><div class=MEntry><div class=MFile><a href="../view/mxConnectionConstraint-js.html">mxConnectionConstraint</a></div></div><div class=MEntry><div class=MFile><a href="../view/mxEdgeStyle-js.html">mxEdgeStyle</a></div></div><div class=MEntry><div class=MFile><a href="../view/mxGraph-js.html">mxGraph</a></div></div><div class=MEntry><div class=MFile><a href="../view/mxGraphSelectionModel-js.html">mxGraphSelectionModel</a></div></div><div class=MEntry><div class=MFile><a href="../view/mxGraphView-js.html">mxGraphView</a></div></div><div class=MEntry><div class=MFile><a href="../view/mxLayoutManager-js.html">mxLayoutManager</a></div></div><div class=MEntry><div class=MFile><a href="../view/mxMultiplicity-js.html">mxMultiplicity</a></div></div><div class=MEntry><div class=MFile><a href="../view/mxOutline-js.html">mxOutline</a></div></div><div class=MEntry><div class=MFile><a href="../view/mxPerimeter-js.html">mxPerimeter</a></div></div><div class=MEntry><div class=MFile><a href="../view/mxPrintPreview-js.html">mxPrintPreview</a></div></div><div class=MEntry><div class=MFile><a href="../view/mxStyleRegistry-js.html">mxStyleRegistry</a></div></div><div class=MEntry><div class=MFile><a href="../view/mxStylesheet-js.html">mxStylesheet</a></div></div><div class=MEntry><div class=MFile><a href="../view/mxSwimlaneManager-js.html">mxSwimlaneManager</a></div></div><div class=MEntry><div class=MFile><a href="../view/mxTemporaryCellStates-js.html">mxTemporaryCellStates</a></div></div></div></div></div><div class=MEntry><div class=MGroup><a href="javascript:ToggleMenu('MGroupContent12')">Index</a><div class=MGroupContent id=MGroupContent12><div class=MEntry><div class=MIndex><a href="../../index/Classes.html">Classes</a></div></div><div class=MEntry><div class=MIndex><a href="../../index/Cookies.html">Cookies</a></div></div><div class=MEntry><div class=MIndex><a href="../../index/Events.html">Events</a></div></div><div class=MEntry><div class=MIndex><a href="../../index/General.html">Everything</a></div></div><div class=MEntry><div class=MIndex><a href="../../index/Files.html">Files</a></div></div><div class=MEntry><div class=MIndex><a href="../../index/Functions.html">Functions</a></div></div><div class=MEntry><div class=MIndex><a href="../../index/Variables.html">Variables</a></div></div></div></div></div><script type="text/javascript"><!--
var searchPanel = new SearchPanel("searchPanel", "HTML", "../../search");
--></script><div id=MSearchPanel class=MSearchPanelInactive><input type=text id=MSearchField value=Search onFocus="searchPanel.OnSearchFieldFocus(true)" onBlur="searchPanel.OnSearchFieldFocus(false)" onKeyUp="searchPanel.OnSearchFieldChange()"><select id=MSearchType onFocus="searchPanel.OnSearchTypeFocus(true)" onBlur="searchPanel.OnSearchTypeFocus(false)" onChange="searchPanel.OnSearchTypeChange()"><option  id=MSearchEverything selected value="General">Everything</option><option value="Classes">Classes</option><option value="Cookies">Cookies</option><option value="Events">Events</option><option value="Files">Files</option><option value="Functions">Functions</option><option value="Variables">Variables</option></select></div><script language=JavaScript><!--
HideAllBut([2], 13);// --></script></div><!--Menu-->



<!--START_ND_TOOLTIPS-->
<div class=CToolTip id="tt1"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.connect = function(</td><td class="PParameter  prettyprint " nowrap>source,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>target,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>evt,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>dropTarget</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote>Connects the given source and target using a new edge. </div></div><div class=CToolTip id="tt2"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxConnectionHandler.prototype.reset = function()</td></tr></table></blockquote>Resets the state of this handler.</div></div><div class=CToolTip id="tt3"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>function mxConnectionHandler(</td><td class="PParameter  prettyprint " nowrap>graph,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>factoryMethod</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote>Constructs an event handler that connects vertices using the specified factory method to create the new edges. </div></div><div class=CToolTip id="tt4"><div class=CVariable><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxConnectionHandler.prototype.graph</td></tr></table></blockquote>Reference to the enclosing mxGraph.</div></div><div class=CToolTip id="tt5"><div class=CClass>Extends mxEventSource to implement a graph component for the browser. </div></div><div class=CToolTip id="tt6"><div class=CVariable><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxConnectionHandler.prototype.factoryMethod</td></tr></table></blockquote>Function that is used for creating new edges. </div></div><div class=CToolTip id="tt7"><div class=CVariable><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxConnectionHandler.prototype.moveIconFront</td></tr></table></blockquote>Specifies if icons should be displayed inside the graph container instead of the overlay pane. </div></div><div class=CToolTip id="tt8"><div class=CVariable><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxConnectionHandler.prototype.moveIconBack</td></tr></table></blockquote>Specifies if icons should be moved to the back of the overlay pane. </div></div><div class=CToolTip id="tt9"><div class=CVariable><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxConnectionHandler.prototype.connectImage</td></tr></table></blockquote>mxImage that is used to trigger the creation of a new connection. </div></div><div class=CToolTip id="tt10"><div class=CClass>Encapsulates the URL, width and height of an image.</div></div><div class=CToolTip id="tt11"><div class=CVariable><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxConnectionHandler.prototype.targetConnectImage</td></tr></table></blockquote>Specifies if the connect icon should be centered on the target state while connections are being previewed. </div></div><div class=CToolTip id="tt12"><div class=CVariable><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxConnectionHandler.prototype.enabled</td></tr></table></blockquote>Specifies if events are handled. </div></div><div class=CToolTip id="tt13"><div class=CVariable><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxConnectionHandler.prototype.select</td></tr></table></blockquote>Specifies if new edges should be selected. </div></div><div class=CToolTip id="tt14"><div class=CVariable><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxConnectionHandler.prototype.createTarget</td></tr></table></blockquote>Specifies if createTargetVertex should be called if no target was under the mouse for the new connection. </div></div><div class=CToolTip id="tt15"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.createTargetVertex = function(</td><td class="PParameter  prettyprint " nowrap>evt,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>source</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote>Hook method for creating new vertices on the fly if no target was under the mouse. </div></div><div class=CToolTip id="tt16"><div class=CVariable><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxConnectionHandler.prototype.marker</td></tr></table></blockquote>Holds the mxTerminalMarker used for finding source and target cells.</div></div><div class=CToolTip id="tt17"><div class=CVariable><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxConnectionHandler.prototype.constraintHandler</td></tr></table></blockquote>Holds the mxConstraintHandler used for drawing and highlighting constraints.</div></div><div class=CToolTip id="tt18"><div class=CClass>Handles constraints on connection targets. </div></div><div class=CToolTip id="tt19"><div class=CVariable><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxConnectionHandler.prototype.error</td></tr></table></blockquote>Holds the current validation error while connections are being created.</div></div><div class=CToolTip id="tt20"><div class=CVariable><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxConnectionHandler.prototype.waypointsEnabled</td></tr></table></blockquote>Specifies if single clicks should add waypoints on the new edge. </div></div><div class=CToolTip id="tt21"><div class=CVariable><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxConnectionHandler.prototype.ignoreMouseDown</td></tr></table></blockquote>Specifies if the connection handler should ignore the state of the mouse button when highlighting the source. </div></div><div class=CToolTip id="tt22"><div class=CVariable><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxConnectionHandler.prototype.first</td></tr></table></blockquote>Holds the mxPoint where the mouseDown took place while the handler is active.</div></div><div class=CToolTip id="tt23"><div class=CClass>Implements a 2-dimensional vector with double precision coordinates.</div></div><div class=CToolTip id="tt24"><div class=CVariable><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxConnectionHandler.prototype.connectIconOffset</td></tr></table></blockquote>Holds the offset for connect icons during connection preview. </div></div><div class=CToolTip id="tt25"><div class=CVariable><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxConnectionHandler.prototype.edgeState</td></tr></table></blockquote>Optional mxCellState that represents the preview edge while the handler is active. </div></div><div class=CToolTip id="tt26"><div class=CClass>Represents the current state of a cell in a given mxGraphView.</div></div><div class=CToolTip id="tt27"><div class=CVariable><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxConnectionHandler.prototype.changeHandler</td></tr></table></blockquote>Holds the change event listener for later removal.</div></div><div class=CToolTip id="tt28"><div class=CVariable><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxConnectionHandler.prototype.drillHandler</td></tr></table></blockquote>Holds the drill event listener for later removal.</div></div><div class=CToolTip id="tt29"><div class=CVariable><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxConnectionHandler.prototype.mouseDownCounter</td></tr></table></blockquote>Counts the number of mouseDown events since the start. </div></div><div class=CToolTip id="tt30"><div class=CVariable><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxConnectionHandler.prototype.movePreviewAway</td></tr></table></blockquote>Switch to enable moving the preview away from the mousepointer. </div></div><div class=CToolTip id="tt31"><div class=CVariable><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxConnectionHandler.prototype.outlineConnect</td></tr></table></blockquote>Specifies if connections to the outline of a highlighted target should be enabled. </div></div><div class=CToolTip id="tt32"><div class=CVariable><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxConnectionHandler.prototype.livePreview</td></tr></table></blockquote>Specifies if the actual shape of the edge state should be used for the preview. </div></div><div class=CToolTip id="tt33"><div class=CVariable><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxConnectionHandler.prototype.cursor</td></tr></table></blockquote>Specifies the cursor to be used while the handler is active. </div></div><div class=CToolTip id="tt34"><div class=CVariable><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxConnectionHandler.prototype.insertBeforeSource</td></tr></table></blockquote>Specifies if new edges should be inserted before the source vertex in the cell hierarchy. </div></div><div class=CToolTip id="tt35"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxConnectionHandler.prototype.isEnabled = function()</td></tr></table></blockquote>Returns true if events are handled. </div></div><div class=CToolTip id="tt36"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.setEnabled = function(</td><td class="PParameter  prettyprint " nowrap>enabled</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote>Enables or disables event handling. </div></div><div class=CToolTip id="tt37"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.isInsertBefore = function(</td><td class="PParameter  prettyprint " nowrap>edge,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>source,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>target,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>evt,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>dropTarget</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote>Returns insertBeforeSource for non-loops and false for loops.</div></div><div class=CToolTip id="tt38"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.isCreateTarget = function(</td><td class="PParameter  prettyprint " nowrap>evt</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote>Returns createTarget.</div></div><div class=CToolTip id="tt39"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.setCreateTarget = function(</td><td class="PParameter  prettyprint " nowrap>value</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote>Sets createTarget.</div></div><div class=CToolTip id="tt40"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxConnectionHandler.prototype.createShape = function()</td></tr></table></blockquote>Creates the preview shape for new connections.</div></div><div class=CToolTip id="tt41"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxConnectionHandler.prototype.init = function()</td></tr></table></blockquote>Initializes the shapes required for this connection handler. </div></div><div class=CToolTip id="tt42"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.isConnectableCell = function(</td><td class="PParameter  prettyprint " nowrap>cell</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote>Returns true if the given cell is connectable. </div></div><div class=CToolTip id="tt43"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxConnectionHandler.prototype.createMarker = function()</td></tr></table></blockquote>Creates and returns the mxCellMarker used in marker.</div></div><div class=CToolTip id="tt44"><div class=CClass>A helper class to process mouse locations and highlight cells.</div></div><div class=CToolTip id="tt45"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.start = function(</td><td class="PParameter  prettyprint " nowrap>state,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>x,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>y,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>edgeState</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote>Starts a new connection for the given state and coordinates.</div></div><div class=CToolTip id="tt46"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxConnectionHandler.prototype.isConnecting = function()</td></tr></table></blockquote>Returns true if the source terminal has been clicked and a new connection is currently being previewed.</div></div><div class=CToolTip id="tt47"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.isValidSource = function(</td><td class="PParameter  prettyprint " nowrap>cell,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>me</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote>Returns mxGraph.isValidSource for the given source terminal.</div></div><div class=CToolTip id="tt48"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxGraph.prototype.isValidSource = function(</td><td class="PParameter  prettyprint " nowrap>cell</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote>Returns true if the given cell is a valid source for new connections. </div></div><div class=CToolTip id="tt49"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.isValidTarget = function(</td><td class="PParameter  prettyprint " nowrap>cell</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote>Returns true. </div></div><div class=CToolTip id="tt50"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.validateConnection = function(</td><td class="PParameter  prettyprint " nowrap>source,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>target</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote>Returns the error message or an empty string if the connection for the given source target pair is not valid. </div></div><div class=CToolTip id="tt51"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.getConnectImage = function(</td><td class="PParameter  prettyprint " nowrap>state</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote>Hook to return the mxImage used for the connection icon of the given mxCellState. </div></div><div class=CToolTip id="tt52"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.isMoveIconToFrontForState = function(</td><td class="PParameter  prettyprint " nowrap>state</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote>Returns true if the state has a HTML label in the graph&rsquo;s container, otherwise it returns moveIconFront.</div></div><div class=CToolTip id="tt53"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.createIcons = function(</td><td class="PParameter  prettyprint " nowrap>state</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote>Creates the array mxImageShapes that represent the connect icons for the given mxCellState.</div></div><div class=CToolTip id="tt54"><div class=CClass>Extends mxShape to implement an image shape. </div></div><div class=CToolTip id="tt55"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.redrawIcons = function(</td><td class="PParameter  prettyprint " nowrap>icons,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>state</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote>Redraws the given array of mxImageShapes.</div></div><div class=CToolTip id="tt56"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.getIconPosition = function(</td><td class="PParameter  prettyprint " nowrap>icon,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>state</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote>Returns the center position of the given icon.</div></div><div class=CToolTip id="tt57"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxConnectionHandler.prototype.destroyIcons = function()</td></tr></table></blockquote>Destroys the connect icons and resets the respective state.</div></div><div class=CToolTip id="tt58"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.isStartEvent = function(</td><td class="PParameter  prettyprint " nowrap>me</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote>Returns true if the given mouse down event should start this handler. </div></div><div class=CToolTip id="tt59"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.mouseDown = function(</td><td class="PParameter  prettyprint " nowrap>sender,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>me</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote>Handles the event by initiating a new connection.</div></div><div class=CToolTip id="tt60"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.isImmediateConnectSource = function(</td><td class="PParameter  prettyprint " nowrap>state</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote>Returns true if a tap on the given source state should immediately start connecting. </div></div><div class=CToolTip id="tt61"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.createEdgeState = function(</td><td class="PParameter  prettyprint " nowrap>me</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote>Hook to return an mxCellState which may be used during the preview. </div></div><div class=CToolTip id="tt62"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.isOutlineConnectEvent = function(</td><td class="PParameter  prettyprint " nowrap>me</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote>Returns true if outlineConnect is true and the source of the event is the outline shape or shift is pressed.</div></div><div class=CToolTip id="tt63"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.updateCurrentState = function(</td><td class="PParameter  prettyprint " nowrap>me,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>point</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote>Updates the current state for a given mouse move event by using the marker.</div></div><div class=CToolTip id="tt64"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.isCellEnabled = function(</td><td class="PParameter  prettyprint " nowrap>cell</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote>Returns true if the given cell allows new connections to be created. </div></div><div class=CToolTip id="tt65"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.convertWaypoint = function(</td><td class="PParameter  prettyprint " nowrap>point</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote>Converts the given point from screen coordinates to model coordinates.</div></div><div class=CToolTip id="tt66"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.snapToPreview = function(</td><td class="PParameter  prettyprint " nowrap>me,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>point</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote>Called to snap the given point to the current preview. </div></div><div class=CToolTip id="tt67"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.mouseMove = function(</td><td class="PParameter  prettyprint " nowrap>sender,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>me</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote>Handles the event by updating the preview edge or by highlighting a possible source or target terminal.</div></div><div class=CToolTip id="tt68"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.updateEdgeState = function(</td><td class="PParameter  prettyprint " nowrap>current,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>constraint</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote>Updates edgeState.</div></div><div class=CToolTip id="tt69"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.getTargetPerimeterPoint = function(</td><td class="PParameter  prettyprint " nowrap>state,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>me</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote>Returns the perimeter point for the given target state.</div></div><div class=CToolTip id="tt70"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.getSourcePerimeterPoint = function(</td><td class="PParameter  prettyprint " nowrap>state,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>next,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>me</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote>Hook to update the icon position(s) based on a mouseOver event. </div></div><div class=CToolTip id="tt71"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.updateIcons = function(</td><td class="PParameter  prettyprint " nowrap>state,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>icons,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>me</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote>Hook to update the icon position(s) based on a mouseOver event. </div></div><div class=CToolTip id="tt72"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.isStopEvent = function(</td><td class="PParameter  prettyprint " nowrap>me</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote>Returns true if the given mouse up event should stop this handler. </div></div><div class=CToolTip id="tt73"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.addWaypointForEvent = function(</td><td class="PParameter  prettyprint " nowrap>me</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote>Adds the waypoint for the given event to waypoints.</div></div><div class=CToolTip id="tt74"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.checkConstraints = function(</td><td class="PParameter  prettyprint " nowrap>c1,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>c2</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote>Returns true if the connection for the given constraints is valid. </div></div><div class=CToolTip id="tt75"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.mouseUp = function(</td><td class="PParameter  prettyprint " nowrap>sender,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>me</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote>Handles the event by inserting the new connection.</div></div><div class=CToolTip id="tt76"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxConnectionHandler.prototype.drawPreview = function()</td></tr></table></blockquote>Redraws the preview edge using the color and width returned by getEdgeColor and getEdgeWidth.</div></div><div class=CToolTip id="tt77"><div class=CFunction>Returns the color used to draw the preview edge. </div></div><div class=CToolTip id="tt78"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.getEdgeWidth = function(</td><td class="PParameter  prettyprint " nowrap>valid</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote>Returns the width used to draw the preview edge. </div></div><div class=CToolTip id="tt79"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.selectCells = function(</td><td class="PParameter  prettyprint " nowrap>edge,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>target</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote>Selects the given edge after adding a new connection. </div></div><div class=CToolTip id="tt80"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.insertEdge = function(</td><td class="PParameter  prettyprint " nowrap>parent,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>id,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>value,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>source,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>target,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>style</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote>Creates, inserts and returns the new edge for the given parameters. </div></div><div class=CToolTip id="tt81"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.getAlignmentTolerance = function(</td><td class="PParameter  prettyprint " nowrap>evt</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote>Returns the tolerance for aligning new targets to sources. </div></div><div class=CToolTip id="tt82"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxConnectionHandler.prototype.createEdge = function(</td><td class="PParameter  prettyprint " nowrap>value,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>source,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>target,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>style</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote>Creates and returns a new edge using factoryMethod if one exists. </div></div><div class=CToolTip id="tt83"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxConnectionHandler.prototype.destroy = function()</td></tr></table></blockquote>Destroys the handler and all its resources and DOM nodes. </div></div><div class=CToolTip id="tt84"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxGraph.prototype.setConnectable = function(</td><td class="PParameter  prettyprint " nowrap>connectable</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote>Specifies if the graph should allow new connections. </div></div><div class=CToolTip id="tt85"><div class=CVariable><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">DEFAULT_HOTSPOT: 0.3</td></tr></table></blockquote>Defines the portion of the cell which is to be used as a connectable region. </div></div><div class=CToolTip id="tt86"><div class=CVariable><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">MIN_HOTSPOT_SIZE: 8</td></tr></table></blockquote>Defines the minimum size in pixels of the portion of the cell which is to be used as a connectable region. </div></div><div class=CToolTip id="tt87"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxGraph.prototype.getConnectionConstraint = function(</td><td class="PParameter  prettyprint " nowrap>edge,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>terminal,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>source</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote>Returns an mxConnectionConstraint that describes the given connection point. </div></div><div class=CToolTip id="tt88"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxGraphModel.prototype.getCell = function(</td><td class="PParameter  prettyprint " nowrap>id</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote>Returns the mxCell for the specified Id or null if no cell can be found for the given Id.</div></div><div class=CToolTip id="tt89"><div class=CClass>Cells are the elements of the graph model. </div></div><div class=CToolTip id="tt90"><div class=CVariable><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">TOOLTIP_VERTICAL_OFFSET: 16</td></tr></table></blockquote>Defines the vertical offset for the tooltip. </div></div><div class=CToolTip id="tt91"><div class=CVariable><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">IS_VML: navigator.appName.toUpperCase()</td></tr></table></blockquote>True if the browser supports VML.</div></div><div class=CToolTip id="tt92"><div class=CClass>Base class for all mouse events in mxGraph. </div></div><div class=CToolTip id="tt93"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxGraph.prototype.isValidTarget = function(</td><td class="PParameter  prettyprint " nowrap>cell</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote>Returns isValidSource for the given cell. </div></div><div class=CToolTip id="tt94"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxGraph.prototype.getEdgeValidationError = function(</td><td class="PParameter  prettyprint " nowrap>edge,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>source,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>target</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote>Returns the validation error message to be displayed when inserting or changing an edges&rsquo; connectivity. </div></div><div class=CToolTip id="tt95"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxGraph.prototype.insertEdge = function(</td><td class="PParameter  prettyprint " nowrap>parent,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>id,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>value,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>source,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>target,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>style</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote>Adds a new edge into the given parent mxCell using value as the user object and the given source and target as the terminals of the new edge. </div></div><!--END_ND_TOOLTIPS-->




<div id=MSearchResultsWindow><iframe src="" frameborder=0 name=MSearchResults id=MSearchResults></iframe><a href="javascript:searchPanel.CloseResultsWindow()" id=MSearchResultsWindowClose>Close</a></div>


<script language=JavaScript><!--
if (browserType) {if (browserVer) {document.write("</div>"); }document.write("</div>");}// --></script></body></html>